0

チェックボックスの有効化と無効化について質問があります。

チェックボックスをオンにすると、「パーソナルトレーニング」が無効になります。

しかし、私はそれを行うことはできません

これが Fiddleです。

$('#optionen :checkbox').on('change', function () {
    $('.menu li.' + this.className).toggleClass('hide');

});

手伝って頂けますか？

前もって感謝します

4

3 に答える 3

0 
$('#optionen :checkbox').on('change', function(){

これは、「を見つけて#optionen、その子孫であるチェックボックスを見つける」ことを意味します。これにより、次の要素が見つかります。

<input type="checkbox">

次に、イベント ハンドラーをこの要素にバインドします。イベント ハンドラー内でthis、要素を指します。イベント ハンドラーは、要素のclassNameプロパティを探します。class属性が設定されていないため、classNameは空の文字列です。したがって、コードは実質的に次のようになります。

$('.menu li.').toggleClass('hide');

これは明らかに無効なセレクタであるため、エラーが発生し、何も起こりません。

あなたの解決策が何であるかわかりません。class要素にプロパティを追加するのと同じくらい簡単かもしれませんinput:

<input type="checkbox" class="leaf">

jsフィドル

于 2013-03-19T17:00:50.430 に答える
0

http://jsfiddle.net/nhhQz/10/

$('#optionen :checkbox').on('change', function(){
    $('.menu li').toggleClass('versteckt');
});

それはあなたが望むものですか？

<input type="checkbox" id="optionen">

チェックボックスのあるクラスまたは ID がありません。チェックボックス付きの「オプション」のIDが必要だと思います。次に、チェックボックス内にクラスを追加する場合を除き、クラスへの参照も削除します。

于 2013-03-19T17:01:17.093 に答える
0

2 つの明白な解決策があります。1 つ目はinputのクラスを与えleafます。

<span><input class="leaf" type="checkbox" />SERVICES</span>

JS フィドルのデモ。

2 つ目は、HTML を修正することです( (または)の唯一の有効な子要素は です)。ulolli

<div id="optionen">
    <ul>
        <li><span><input type="checkbox" />SERVICES</span>

            <ul class="menu">
                <li class="first leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
                <li class="leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
                <li class="leaf"><a href="/site/personal_training">PERSONAL TRAINING</a>

                </li>
            </ul>
        </li>
    </ul>
</div>

そして、次を使用します。

$('#optionen :checkbox').on('change', function () {
    $(this).closest('li').find('ul.menu li').toggleClass('versteckt');
});

JS フィドルのデモ。

参考文献:

于 2013-03-19T17:01:31.850 に答える