Question

我有多个名为.details的div，我想将以下点击功能应用于它们。但是现在如果我点击一个li，所有具有相同类名的li都会在名为.details的所有div中发生变化。如何仅将点击功能应用于当前.details div？

$(document).ready(function() {
    $('.details div.two').hide();
    $('.details div.three').hide(); 

    $('.details ul li.one').click(function () { 
        $(this).addClass('active');
        $('.details ul li.two').removeClass('active');
        $('.details ul li.three').removeClass('active');
        $('.details div.one').show();
        $('.details div.two').hide();
        $('.details div.three').hide(); 
    });
    $('.details ul li.two').click(function () { 
        $(this).addClass('active');
        $('.details ul li.one').removeClass('active');
        $('.details ul li.three').removeClass('active');
        $('.details div.one').hide();
        $('.details div.two').show();
        $('.details div.three').hide(); 
    });
    $('.details ul li.three').click(function () {   
        $(this).addClass('active');
        $('.details ul li.one').removeClass('active');
        $('.details ul li.two').removeClass('active');
        $('.details div.one').hide();
        $('.details div.two').hide();
        $('.details div.three').show(); 
    });
});

HTML

<div class="details">
    <ul>
        <li class="one active"><span>Nav 1</span></li>
        <li class="two"><span>Nav 2</span></li>
        <li class="three"><span>Nav 3</span></li>
    </ul>
    <div class="one">
        <p>Content 1</p>
    </div>
    <div class="two">
        <p>Content 2</p>
    </div>
    <div class="three">
        <p>Content 3</p>
    </div>                                                                          
</div>

CSS

.active {background:#fff;}

Answer 1

您可以使用closest查找类details的最近祖先，并使用它来查找相应的元素。

例如：

$('.details ul li.two').removeClass('active');

会变成：

$(this).closest('.details').find('ul li.two').removeClass('active');

Answer 2

使用closest返回到顶部，然后使用find返回：

$('.details ul li.one').click(function () { 
    $(this).closest('.details')
           .find('ul li').removeClass('active').end()
           .find('div.two, div.three').hide().end()
           .find('div.one').show();
    $(this).addClass('active');
});

与其他两个相似。

你可以通过一些概括来进一步清理，然后你只需要一个.click来电而不是三个;像这样的东西。

$('.details ul li').click(function () {
    var $this    = $(this);
    var $details = $this.closest('.details');
    var idx      = $details.find('li').index(this);
    $details.find('ul li').removeClass('active').end()
            .find('div:not(:eq(' + idx + '))').hide().end()
            .find('div:eq(' + idx + ')').show();
    $(this).addClass('active');
});

演示：http://jsfiddle.net/ambiguous/2zYt3/

Answer 3

我会这样做：

<div class="details">
    <ul>
        <li class="one active" data-divclass="one"><span>Nav 1</span></li>
        <li class="two" data-divclass="two"><span>Nav 2</span></li>
        <li class="three" data-divclass="three"><span>Nav 3</span></li>
    </ul>
    <div class="one">
        <p>Content 1</p>
    </div>
    <div class="two">
        <p>Content 2</p>
    </div>
    <div class="three">
        <p>Content 3</p>
    </div>                                                                          
</div>  

<script type='javascript'>

    $(document).ready(function() {
        $('.details ul li').click(function () { 
            var $this=$(this);
            $('.details ul li').removeClass('active');
            $this.addClass('active');
            $('div.details div').hide();
            $('div.details div.'+$this.data('divclass')).show();
        });
    });

</script>

.CSS

.active {background-color: #999;}
div.two, div.three {display: none;}

演示页 - http://jsfiddle.net/a868v/

JQuery：如何只将click函数应用于当前DIV中的元素？

3 个答案: