Question

我有一个同位素画廊，其物品很小，点击后放大。我正在使用此代码执行此操作：

$container.on( 'click', '.element', function() {
    $( this ).toggleClass('large');
    $container.isotope('reLayout');
});

这有效，但我在项目或元素中有一个按钮，如果我点击该按钮，该项目将再次调整大小，这不是我想要的。然后我尝试了这段代码：

var buttonClicked = 'Button Clicked!';
$container.on( 'click', '.element', function() {
  if ( $( this ).is( ".button" ) ) {
    console.log(buttonClicked); //Do Nothing if Button is Clicked
  } else {
    $( this ).toggleClass('large');
    $container.isotope('reLayout');
  }
});

然而，这不起作用。该项目仍然调整大小。从使用console.log开始，它似乎没有注册按钮被点击。

我不确定我的代码中有什么错误，或者我没有正确使用.is()。

HTML 的

元素中有两种类型的按钮。一个按钮组和一个单独的按钮。

按钮组类型HTML：

<li class="element" data-category="hybrid">
  <p class="type">H</p>
  <h2 class="name">Lorem Ipsum</h2>
  <p class="info">No Info Available</p>
  <ul class="button-group radius">
    <li><a class="button black view-button" href="#">View</a></li>
    <li><a class="button black review-form-lb" href="#review-form-lightbox">Review</a></li>
  </ul>
</li>

孤立按钮HTML：

<li class="element" data-category="hybrid">
  <p class="type">H</p>
  <h2 class="name">Lorem Ipsum</h2>
  <p class="info">No Info Available</p>
  <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review</a></p>
</li>

如何解决问题，如果在元素中单击按钮，该项目不会切换类？

Answer 1

它是一个锚点，您正在尝试检查按钮，使用jQuery的hasClass属性来检查锚点的按钮类。

使用event.target获取实际点击的元素。

var buttonClicked = 'Button Clicked!';

$container.on('click','.element', function(event) {
    if ($(event.target).hasClass("button")) {
        console.log(buttonClicked); //Do Nothing if Button is Clicked
    } else {
        $(this).toggleClass('large');
        $container.isotope('reLayout');
    }
});

单击测试以查看单击的内容并相应地运行功能

1 个答案: