Question

我正在使用此jQuery代码段在单击链接时显示/隐藏内容..

jQuery(document).ready(function() {
  jQuery('.showSingle').on('click', function () {
    jQuery(this).addClass('selected').siblings().removeClass('selected');
    jQuery('.targetDiv').hide();
    var selector = '#div' + jQuery(this).data('target');
    jQuery(selector).show();
  });
});

http://jsfiddle.net/W4Km8/7947/

由于某些原因，当点击另一个链接时，所选的类没有被删除，我哪里出错？

Answer 1

问题是a链接不是兄弟，因此.siblings()调用不会选择其他链接。

您应该使用（代表您的HTML ）

jQuery(this).addClass('selected')
            .closest('.p_link')
            .siblings()
            .find('.showSingle')
            .removeClass('selected');

http://jsfiddle.net/W4Km8/7951/

演示

但是这仍然不能完美地对你的结构起作用，因为它不一致。（它不适用于第一个链接，因为.p_link嵌套在另一个div内而不是其他）

另一种选择（ for this adhoc structure ）可以是

jQuery('.showSingle.selected').removeClass('selected');
jQUery(this).addClass('selected');

http://jsfiddle.net/W4Km8/7950/

演示

Answer 2

您也可以通过代码中的两处更改来使用它：找到“.showSingle”类的“最近”div 第一次更改：更改HTML的第一行

<div class="col-md-4 p_link">

<a class="showSingle" data-target="1">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis orci id nulla aliquet fermentum. Suspendisse ultrices nulla id magna cursus blandit.
</a>

</div>

 <div class="col-md-4 p_link">
 <a class="showSingle" data-target="2">Sed feugiat fringilla lacus, quis aliquam turpis cursus eu. In dignissim ultrices tellus in convallis. Sed euismod tellus vel lorem</a>
</div>

第二次更改：js脚本代码的第3行

jQuery(document).ready(function() {
 jQuery('.showSingle').on('click', function () {
       jQuery(this).closest('div').addClass('selected').siblings().removeClass('selected');
jQuery('.targetDiv').hide();
var selector = '#div' + jQuery(this).data('target');
jQuery(selector).show();
 });
});

没有删除jQuery类

2 个答案: