Jquery:单击一次按钮会触发具有相同类的所有按钮

时间:2015-03-01 10:24:23

标签: jquery toggleclass

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

我从此链接获得了代码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;

  });

2 个答案:

答案 0 :(得分:1)

下面不是使用类$('.desc-wrapper')来选择具有该特定类的所有元素,而是仅选择前一个元素$(this).prev()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;
 });

答案 1 :(得分:0)

这就是jquery的工作原理。

如果您将事件附加到“more-info”类,则具有此类的所有对象都将触发该事件。

如果您只想要一个对象来触发事件,那么为该对象指定唯一的id(例如,id =“id1”),然后在jquery对象中将click事件仅附加到“id1”标识的对象,即

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