2

私は Javascript に非常に慣れていないため、探している情報が見つからないようです。「はい」ラジオボタンをクリックすると別のdivを下にスライドさせ、「いいえ」をクリックすると上にスライドさせようとしています。ただし、どちらをクリックしても何も起こりません。これは私の現在のコードです：

HTML:

<div class="field">
<label for="">Apprentice</label>
<div class="topRadio">
<input name="apprentice" group="apprentice" type="radio" value="Yes" onclick="dropbcitdown()">
<label for="">Yes</label>
<input name="apprentice" group="apprentice" type="radio" value="No" onclick="pickbcitup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

<div class="field slidingdiv" id="doyouattend">
<label for="">Do you attend BCIT?</label>
<div class="topRadio">
<input name="bcit" group="bcit" type="radio" value="Yes" onclick="droptransportationdown()">
<label for="">Yes</label>
<input name="bcit" group="bcit" type="radio" value="No" onclick="picktransportationup()">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class ="clear"></div>
</div>

<div class="field slidingdiv" id="doyouneed">
<label for="">Do you need ground transportation to city hall?</label>
<div class="topRadio">
<input name="transportation" group="transportation" type="radio" value="Yes">
<label for="">Yes</label>
<input name="transportation" group="transportation" type="radio" value="No">
<label for="">No</label>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>

Javascript

<script>
function bcitDown() {
    $("#doyouattend").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}

function bcitUp() {
    $("#doyouattend").slideUp("slow" function() {
        $(this).css({
        display: "none";
        })
    })
}

function transportationDown() {
    $("#doyouneed").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}

function transportationUp() {
    $("#doyouneed").slideUp("slow" function() {
        $(this).css({
        display: "none";
        })
    })
}
</script>

ラジオボタンの値でも試してみましたが、ドロップダウンする前に送信できません。関係ありませんが、「改行を作成する」は、なぜそれが起こっているのか疑問に思っている人のためのものです。それなしでこれを実行しようとしましたが、別の結果は得られませんでした。明らかな構文エラーを犯している場合、またはこれが完全に見逃していた明らかな解決策になってしまった場合は、申し訳ありません。私はすべてを試したと感じています。注: JQuery を含めました。

4

2 に答える 2

4

最初に Jquery ライブラリを追加します

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

これを試した後：

<script>
$(document).ready(function(){
    $('input[name=apprentice]').click(function(){
    if ($(this).val() == 'yes')
    {
       $("#yourdiv").slideDown('slow');
    }
    else
    {
       $("#yourdiv").slideUp('slow');
    }
    });

}):
</script>
于 2013-11-06T19:58:09.960 に答える
1

jquery 関数は、 jquery オブジェクトにのみ適用できます。getElementById() で選択すると、DOM オブジェクトは取得されますが、Jquery オブジェクトは取得されません。そのため、関数内で $(this) を使用して CSS を変更します。

以下を使用することをお勧めします。

function dropbcitdown() {
    $("#doyouattend").slideDown("slow" function() {
        $(this).css({
        display: "inline";
        })
    })
}
于 2013-11-06T19:39:10.193 に答える