javascript - 单击时如何将类添加到其父 div

标签 javascript jquery wordpress onclick

我在 Wordpress 中使用此脚本,因此使用 $=jQuery。

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

如何将其更改为仅将类添加到其父级的 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>

谢谢

最佳答案

您可以使用 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");
  });

});

关于javascript - 单击时如何将类添加到其父 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30786658/

相关文章:

javascript - AngularJs 在完成 2 个不同的 https 请求时调用函数

wordpress - 将 sql 查询添加到 wordpress 永久链接的末尾?

mysql - 如何编写查询以接受搜索框的输入并从 MySql db (Wordpress) 进行搜索

wordpress - 如何删除tinyMCE 4中的键盘快捷键?

javascript - 在物理上是否可以在没有服务器端语言的情况下将信息写入 JSON 文件?

jquery - ASP-MVC : Different style-CSS for different languages

javascript - 如何在 angularjs 中进行自动完成(过滤器列表不显示)

javascript - 获取嵌入在jquery表中的标签

javascript - 按一定顺序分隔数组中的字符串

javascript - 我们必须将ajax代码和web方法放在同一个asp.net页面中吗?