使用 jquery 选择器浏览所有图像答案

【问题标题】：browse all images with jquery selector使用 jquery 选择器浏览所有图像
【发布时间】：2013-03-19 06:51:00
【问题描述】：

当 mousemove 事件启动时，我使用此代码显示一个链接

$('#articlesdata\\:0\\:article-image').mousemove(function(){
                $('#articlesdata\\:0\\:article-suppr').show();
            });

我想将此代码应用于所有图像，我的意思是：articlesdata\\:0\\:article-image 和 articlesdata\\:1\\:article-image 和 articlesdata\\:2\\:article-image 等等：所有整数

我怎样才能做到这一点

谢谢

【问题讨论】：

我不熟悉这种选择器语法，并且在鼠标移动时在 dom 上做这么多工作并不是一个好主意
@lbu 别担心，没人。
你从哪里得到这个代码？ :0 是什么？你能发布你的 HTML 吗？
这只是 id。他正在使用正确的语法来选择带有id="articlesdata:0:article-image" 的元素
您的 ID 似乎过于复杂。您可以将自己的类添加到这些元素中，并保持 ID 更短吗？

标签： javascript jquery jquery-selectors repeat

【解决方案1】：

使用attribute selector 和^

这会选择一个值恰好以给定字符串开头的 id。

试试这个

$([id^='articlesdata']).mousemove(function(){
   .....

【讨论】：

对不起，我不明白你的意思
您可以通过链接...无论如何，这会选择 ID 以articlesdata 开头的所有元素.. 试试看

【解决方案2】：

选择它们的最好方法是给它们一个通用的类。

<img class="article-image" id="articlesdata:0:article-image" src="foo1.jpg">

然后按类别选择：

$(".article-image").mouseenter(function(){
    $("#" + this.id.replace('image','suppr')).show();
}).mouseleave(function(){
    $("#" + this.id.replace('image','suppr')).hide();
});

或使用您的原始代码：

$(".article-image").mousemove(function(){
    $("#" + this.id.replace('image','suppr')).show();
})

【讨论】：

我已经尝试过上课，但是当我将鼠标悬停在其中一个上时，所有 article-suppr 都会出现：我不想要的
@atbegin-but 那是因为你做错了。你有没有试过我的代码？请注意我是如何通过班级和 id 做到这一点的。
我用alert("#" + this.id.replace('image','suppr')); 对其进行了测试，它返回给我#articlesdata:0:article-suppr，但我需要在每个: 之前加上\\ 才能被选中；
@atbegin-but 这可以通过.replace 或.split() 和.join() 来完成
我测试了 "#" + this.id.replace('image','suppr').replace(':','\\:') 但它返回： #articlesdata\:0:article-suppr 而我需要 '#articlesdata\\:0\\:article-suppr

【解决方案3】：

假设您的图像具有 articlesdata\\:0\\:article-image 或 articlesdata:0:article-image 之类的 id，您可能会执行以下操作：

$('img').mousemove(function(){
     if (/article-image$/.test(this.id)) {
         $(document.getElementById(this.id.replace(/-image$/, '-suppr'))).show();
     }
});

但我建议使用mouseenter，而不是mousemove。

Demonstration

【讨论】：