在點擊測試，看看點擊了什麼，並相應地運行功能

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'); 
    } 
});