Jquery：一键点击触发所有相同class的按钮

Question

我有下面的代码，当单击“更多信息”按钮时，它会显示文章的隐藏内容。当我单击其中一个按钮时，所有按钮都会触发它们的事件，因为它们都具有相同的 class。如何仅显示仅单击“更多信息”按钮的内容？

我从这个 link、http://codepen.io/rossgray/pen/CpJgm

得到了代码

我还是jquery的新手，我真的希望有人能帮助我。谢谢！

  var descMinHeight = 120;
  var desc = $('.desc');
  var descWrapper = $('.desc-wrapper');

  // show more button if desc too long
  if (desc.height() > descWrapper.height()) {
    $('.more-info').show();
  }


      // When clicking more/less button
      $('.more-info').click(function() {


    var fullHeight = $('.desc').height();

    if ($(this).hasClass('expand')) {
      // contract
      $('.desc-wrapper').animate({'height': descMinHeight}, 'slow');
    }
    else {
      // expand 
      $('.desc-wrapper').css({'height': descMinHeight, 'max-height': 'none'}).animate({'height': fullHeight}, 'slow');
    }

    $(this).toggleClass('expand');
    return false;

  });

Answer 1

这就是 jquery 的工作原理。

如果您将事件附加到 "more-info" class，所有具有此 class 的对象都将触发该事件。

如果您只希望一个对象触发事件，则为该对象指定一个唯一的 id（例如，id="id1"），然后在 jquery 对象中附加点击事件仅针对 "id1" 标识的对象，即

$('#id1').click(function() {
...
}

Answer 2

下面不是使用 class $('.desc-wrapper') 到 select 所有具有特定 class 的元素，只有前一个元素 $(this).prev() 是 select编辑。 Updated

  $('.more-info').click(function() {

    var fullHeight = $('.desc').height();

  if ($(this).hasClass('expand')) {

  // contract
     $(this).prev().animate({'height': descMinHeight}, 'slow');
  }
  else {
  // expand 
     $(this).prev().css({'height': descMinHeight, 'max-height': 'none'}).animate({'height': fullHeight}, 'slow');
  }

   $(this).toggleClass('expand');
   return false;
 });

Jquery：一键点击触发所有相同class的按钮

Jquery: One button click triggers all the buttons with same class

jquery

toggleclass