单击时如何将 class 添加到其父 div

Question

我在 Wordpress 中使用这个脚本，因此 $=jQuery.

这目前将 .current class 添加到所有 .col-xs-4.col-sm-4.feature_thumb divs。

如何将其更改为仅将 class 添加到其父项的 div？

jQuery(document).ready(function(){

jQuery(".feature_thumb a").click(function(){

    jQuery(".col-xs-4.col-sm-4.feature_thumb").addClass("current");

});

});

有人可以帮我解决这个问题吗？

这是我的html

<div class="col-xs-4 col-sm-4 feature_thumb">
    <a class="feature_thumb" id="feature_thumb1" onclick="return false;"  
    href="image1.jpg"><p>Image 1</p></a>
</div>

<div class="col-xs-4 col-sm-4 feature_thumb">
    <a class="feature_thumb" id="feature_thumb12" onclick="return false;" 
    href="image2.jpg"><p>Image 2</p></a>
</div>

谢谢

Answer 1

您可以使用 event.target 获取对单击内容的引用，然后找到与您的选择器匹配的最接近的 DOM 节点，如下所示：

jQuery(document).ready(function() {

  jQuery(".feature_thumb a").click(function(event) {
    jQuery(event.target).closest(".col-xs-4.col-sm-4.feature_thumb").addClass("current");
  });

});

您可能需要从所有其他节点中删除 current 类，因此您可能需要这样：

jQuery(document).ready(function() {

  jQuery(".feature_thumb a").click(function(event) {
    jQuery(".col-xs-4.col-sm-4.feature_thumb.current").removeClass("current");
    jQuery(event.target).closest(".col-xs-4.col-sm-4.feature_thumb").addClass("current");
  });

});

单击时如何将 class 添加到其父 div

How to add class to its parent div when clicked

javascript

wordpress

jquery

onclick