Question

我有3个父div和3个孩子div。当我点击父div等效的孩子div应该可见。父母和孩子的等效列表。每当用户悬停1'st div ul li等效的孩子ul li添加一些类（突出显示）。而且在某个时候，第二个div也像那样工作。不会影响一个div到另一个div。我在这里写了一些代码，它的一些工作正常。我想要优化代码。是否有任何可能适用于此代码的oops。

有些是马车。是否有任何方法可以使用获取索引号

HTML CODE

 <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 CODE

$(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编程的新手

Answer 1

您需要做的是将.hover()函数绑定到click事件之外，而不是在其中：

$(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

Div点击和悬停效果父对子

1 个答案: