【问题标题】:jQuery click function not working properlyjQuery单击功能无法正常工作
【发布时间】:2012-09-18 06:53:45
【问题描述】:

我正在尝试通过 jQuery 创建一个点击事件

这是 HTML 代码

<div class="wpcart_gallery" style="text-align:center; padding-top:5px;">

<a class="thickbox cboxElement"  href="0037.jpg" rev=" 0037.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0037-50x50.jpg">
</a>

<a class="thickbox cboxElement"  href="0038.jpg" rev=" 0038.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0038-50x50.jpg">
</a>

<a class="thickbox cboxElement"  href="0039.jpg" rev=" 0039.jpg">
<img class="attachment-gold-thumbnails colorbox-736" width="50" height="50" src="0039-50x50.jpg">
</a>

</div>

请注意,图片链接的类名称为thickbox cboxElement。当页面加载类 cboxElement 从 div 内的第一个图像中删除时,我要做的是当用户单击任何图像以从该图像链接中删除类名 cboxElement 并将类 cboxElement 添加到其他图片链接。

<script type="text/javascript">
    jQuery('document').ready(function($){
         $(".wpcart_gallery a:first").removeClass("cboxElement");
         jQuery(".wpcart_gallery img").click(function($){
             jQuery(".wpcart_gallery a").removeClass('cboxElement').siblings().addClass('cboxElement');
        });
    });
</script>

上面的代码可以工作......排序。它从第一个图像链接中删除了类名 cboxElement,但是单击事件不起作用,当我单击任何图像时,它会将类 cboxElement 添加到所有图像链接中。

我要做的是将类 cboxElement 添加到所有图像链接,除了被点击的链接。

我的 jQuery 代码错误控制台中没有任何错误,jquery.js 文件位于标头中并且正在运行。

这是一个示例……请注意大图下方的 3 张图片。 http://www.taranmarlowjewelry.com/products-page/rings/product-1-2/

【问题讨论】:

  • 可能想要使用 $ 而不是 jQuery。
  • 我得到相同的结果...所有图片链接都添加了 cboxElement 并且不会从被点击的图片链接中删除类 cboxElement

标签: jquery wordpress syntax click


【解决方案1】:

当你做一个

 jQuery(".wpcart_gallery a")

您将获得 div 中所有标签的列表,而不是您单击的标签。因此,当首先删除该类然后将其添加到所有兄弟姐妹时意味着:

  1. 从所有标签中删除类
  2. 将类添加到所有标签

要获得属于被点击图像的 a,请执行以下操作:

jQuery(this).closest('a')

希望这行得通!

【讨论】:

  • 我会做一个 jQuery(this).parent();单击的图像(处理程序显然与图像相关联)将始终inside需要修改的链接。然后将其链接到其他链接: jQuery(this).parent().doStuff().siblings().doStuff();
  • 是的,假设 始终是 的直接父级,父级也会这样做
【解决方案2】:

从函数参数中删除 $

jQuery(".wpcart_gallery img").click(function(){
             jQuery(".wpcart_gallery a").removeClass('cboxElement').siblings().addClass('cboxElement');
        });

【讨论】:

  • 我得到相同的结果...所有图片链接都添加了 cboxElement,并且不会从被点击的图片链接中删除类 cboxElement
  • 是的,我猜。不应该匆忙回答
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-02-12
  • 2012-12-28
  • 2017-08-05
  • 2012-05-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多