点击链接时如何用jQuery(this)仅显示对应spinner？

核心问题原因 #

你当前代码里的jQuery(".spinner").show()会选中页面上所有带有.spinner类的元素，所以点击任意链接时所有Spinner都会显示。

正确的定位方式 #

确实要利用jQuery(this)来定位当前被点击的链接，然后找到它内部的Spinner元素，修改后的点击事件代码如下：

jQuery(document).ready(function() {
    jQuery("a.sig_lightbox_link#$pageid").click(function() {
        // 仅查找当前被点击链接下的.spinner元素并显示
        jQuery(this).find(".spinner").show();
        sig_lightbox_fire(jQuery(this).attr("id"));
    });
});

这里的find(".spinner")会在当前被点击的<a>标签（即this指向的元素）的子元素中查找Spinner，不会影响页面上其他Spinner。

为什么closest()无效？ #

closest()方法是向上查找父元素，而你的.spinner是<a>标签的子元素，所以用closest()找不到对应的元素，应该用向下查找子元素的find()或者children()（如果Spinner是直接子元素的话，children()效率更高）。

优化建议（减少冗余代码） #

你现在每个链接都生成一个独立的document ready脚本块，这会造成代码冗余。可以改成事件委托的方式，只需要在页面底部添加一次脚本即可处理所有链接：

jQuery(document).ready(function() {
    // 事件委托：监听所有a.sig_lightbox_link的点击事件
    jQuery(document).on('click', 'a.sig_lightbox_link', function() {
        jQuery(this).find(".spinner").show();
        sig_lightbox_fire(jQuery(this).attr("id"));
    });
});

这样PHP代码里只需要生成HTML链接部分，不用再为每个链接生成单独的脚本块，页面代码会更简洁高效。

内容的提问来源于stack exchange，提问作者user5853892