0

3 つの親 div と 3 つの子 div があります。親divの同等の子divをクリックすると、親と子の同等のリストの両方が表示されます。ユーザーが最初の div ul li に相当する子 ul li をホバーするたびに、いくつかのクラス (ハイライト) を追加します。一度に 2 番目の div もそのように機能します。ある div から別の div には影響しません。ここにいくつかのコードを書きましたが、一部は正常に機能しています。コードを最適化したい。このコードに適用される可能性のあるものはありますか。

いくつかはバグがあります。インデックス番号の取得を使用せずにこれを行う方法はありますか

HTML コード

 <div class="myparent">
                        <div class="parent">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                            click here and hover and test-'s
                        </div>
                        <div class="parent">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>
    click here and hover and test-'s
                        </div>

                        <div class="parent"></div>

                    </div>

                    <div class="mychaild">
                        <div class="chaild" style="display:none">
                            <ul>
                                 <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                        </div>
                        <div class="chaild" style="display:none">
                            <ul>
                                <li>test1</li>
                                <li>test2</li>
                                <li>test3</li>
                            </ul>

                        </div>
                        <div class="chaild" style="display:none"></div>
                    </div>

JavaScript コード

$(document).ready(function() {
    $('.parent').click(function(e) {
        e.preventDefault();
        indexn = $('.parent').index(this);
        $('.chaild:eq(' + indexn + ')').show();
        $('.parent:eq(' + indexn + ') ul li').hover(function() {
            $(this).toggleClass('selected');
            chaildindex = $('.parent:eq(' + indexn + ') ul li').index(this);
            $('.chaild:eq(' + indexn + ') ul li:eq(' + chaildindex + ')').toggleClass('selected');
        });
    });
});

理解を深めるために http://codepen.io/sarath704/pen/cpKsJ

または http://jsbin.com/Aqidopi/1/edit

そして私に提案をしてください私はJavaScriptとjQueryプログラミングに不慣れです

4

1 に答える 1

1

あなたがする必要がある.hover()のは、クリックイベントの内側ではなく、外側の関数をバインドすることです:

$(document).ready(function() {
    $('.parent').click(function(e) {
        e.preventDefault();
        indexn = $('.parent').index(this);
        $('.chaild:eq(' + indexn + ')').show();
    });
    $('.parent ul li').hover(function() {
        $(this).toggleClass('selected');
        var liIndex = $(this).index(),
            parentIndex = $(this).parents('.parent').index();
        $('.chaild:eq('+parentIndex+') > ul > li:eq('+liIndex+')').toggleClass('selected');
    });

});

http://codepen.io/terrymun/pen/qzlfh

于 2013-11-07T07:27:59.473 に答える