Question

我有一个示例代码

On Html：

<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>

和jquery：

    $('div[id^=item-][id$=-desc]').hide().before('<a href="#" class="see-more" id="toggle-desc">More</a>');

    $('a#toggle-desc').click(function (e) {
        e.preventDefault();
        var $this = $(this);
        $this.toggleClass('see-more');
        if($this.hasClass('see-more')){
            $this.text('More');         
        } else {
            $this.text('Close');
        }
        $('div[id^=item-][id$=-desc]').slideToggle(200);
    });

当我点击更多时，它会打开所有div（http://jsfiddle.net/3v25guz6）。如何点击只显示项目desc？

Answer 1

您必须仅定位所点击的div的下一个兄弟a所以

$(this).next('div').slideToggle(200);

此外，元素的id必须是唯一的，因此对于动态添加的元素，使用该类来注册click处理程序

＆＃13;

$('div[id^=item-][id$=-desc]').hide().before('<a href="#" class="see-more">More</a>');

$('.see-more').click(function(e) {
  e.preventDefault();
  var $this = $(this);
  $this.toggleClass('see-more');
  $this.text($this.hasClass('see-more') ? 'More' : 'Close');
  $(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>

＆＃13;

Answer 2

http://jsfiddle.net/3v25guz6/2/

$('div[id^=item-][id$=-desc]').hide().before('<a href="#" class="see-more" id="toggle-desc">More</a>');

 $('a#toggle-desc').click(function (e) {
     e.preventDefault();
     var $this = $(this);
     $this.toggleClass('see-more');
     if ($this.hasClass('see-more')) {
         $this.text('More');
     } else {
         $this.text('Close');
     }
     $this.next().slideToggle(200);
 });

单击项目时错误查询切换打开所有div？

2 个答案: