0

考えられるいくつかのラジオボタンでクラスを非表示または表示できるスクリプトを作成しますが、実行時に機能せず、動的に変更されません。アイデアはありますか?

私のスクリプト：

    $(document).ready(function() {
        if (document.getElementById('addContent').checked) {
            $(".contentForm").show();
            $(".searchContentForm").hide();
        }
        else if (document.getElementById('editContent').checked || 
                       document.getElementById('deleteContent').checked) {
            $(".searchContentForm").show();
            $(".contentForm").hide();
        }
        else {
            $(".searchContentForm").hide();
            $(".contentForm").hide();
        }
    });​

JsFiddle デモ: http://jsfiddle.net/BpMed/

4

5 に答える 5

2

これを試してください：

function forDynamic()
{
        if (document.getElementById('addContent').checked) {
            $(".contentForm").show();
            $(".searchContentForm").hide();
        }
        else if (document.getElementById('editContent').checked || 
                       document.getElementById('deleteContent').checked) {
            $(".searchContentForm").show();
            $(".contentForm").hide();
        }
        else {
            $(".searchContentForm").hide();
            $(".contentForm").hide();
        }

}

上記のコードを JavaScript に追加します。更新のたびに、forDynamic();を呼び出すだけです。

于 2012-10-05T13:06:57.683 に答える
2

document.getElementById1つには、jqueryを使用しているのになぜ使用しているのですか?

また、クリックされるラジオを探している関数の側に if ブロックをラップする必要があります。このjsfiddleを参照してください。各チェックボックスにのクラスを追加しましたchangeup。もちろん、好きなものを追加できます。

$(".changeUp").click(function() {
    if ($('#addContent').is(':checked')) {
        $(".contentForm").show();
        $(".searchContentForm").hide();
    }
    else if ($('#editContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
    else if ($('#deleteContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
    else {
        $(".searchContentForm").hide();
        $(".contentForm").hide();
    }
});
于 2012-10-05T13:11:43.483 に答える
2

簡略化されたコード:

$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=tContent]').click(function() {    
    if ($('#addContent').is(':checked')) {
        $(".contentForm").show();
        $(".searchContentForm").hide();
    }
    else if ($('#editContent').is(':checked') || 
             $('#deleteContent').is(':checked')) {
        $(".searchContentForm").show();
        $(".contentForm").hide();
    }
});

ライブデモを参照

</p>

于 2012-10-05T13:15:43.857 に答える
1

すでに回答を受け入れていることは知っていますが、トグルを使用して条件を渡すことができます-つまり、true = showおよびfalse = hide-これにより、要素を表示/非表示にするためだけに、if/elseステートメント内の重複がほとんどなくなります。

$(".searchContentForm").hide();
$(".contentForm").hide();
$('input[name=contentMng]').change(function() {   
   var adc =  $('#addContent').is(':checked'); 
   var edc = $('#editContent').is(':checked') ||  $('#deleteContent').is(':checked');
   $(".contentForm").toggle(adc);
   $(".searchContentForm").toggle(edc);
});

http://jsfiddle.net/HLmru/

</p>

于 2012-10-05T14:14:14.780 に答える
1

文脈が少ないのでなんとも言えませんが、この関数は document.ready (最初のページの読み込み) でのみ実行されているようです。より動的なものが必要な場合は、関数をそれらのチェックボックスの変更イベントにバインド ( http://api.jquery.com/bind/ ) する必要があります。

同様の非常に基本的な例: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

于 2012-10-05T13:10:32.617 に答える