如何在多个html元素上重复相同的Javascript代码

注意：更改代码，使图像和文本成为链接

基本上，我有三张图片，都是同一个类，不同的ID。我有一个javascript代码，我想应用到所有三张图片上，除了代码需要根据图片的不同而略有不同。以下是html：

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/actual.jpg"  id="first"></a>
<a href="images/watermark_pic1.jpg"><div id="firsttext" class="spanlink"><p>lots of text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/fake.jpg" id="second"></a>
<a href="images/watermark_pic1.jpg"><div id="moretext" class="spanlink"><p>more text</p></div></a>
</div>

<div class=column1of4>
<a href="images/watermark_pic1.jpg"><img src="images/real.jpg" id="eighth"></a>
<a href="images/watermark_pic1.jpg"><div id="evenmoretext" class="spanlink"><p>even more text</p></div></a>
</div>

因此，当用户将鼠标悬停在#first上时，将显示#firsttext。然后，我希望这样，当用户将鼠标悬停在#second上时，会出现#moretext，等等

我用Python编程，我创建了一个sudo代码，基本上就是这样

text = [#firsttext, #moretext, #evenmoretext]
picture = [#first, #second, #eighth] 

for number in range.len(text) //over here, basically find out how many elements are in text


$('text[number]').hide();
$('text[number], picture[number]').hover(function(){
 //in
  $('text[number]').show();

},function(){
 //out
  $('text[number]').hide();
});

语法可能有点离题，但那只是sudo代码。有人能帮我为它编写实际的Javascript代码吗？

为什么不

$('.spanlink').hide();
$('.column1of4').hover(
  function() {
    // in
    $(this).children('.spanlink').show();    
  },
  function() {
    // out
    $(this).children('.spanlink').hide();
  }
);

---

它甚至不需要身份证

因此，如果您的html看起来像：

$('.column1of4').on('mouseenter mouseleave', 'img, .spanlink', function(ev) {
    $(ev.delegateTarget).find('.spanlink').toggle(ev.type === 'mouseenter');
}).find('.spanlink').hide();

但在你现有的基础上：

var text = ['#firsttext', '#moretext', '#evenmoretext'];
var picture = ['#first', '#second', '#third'];

这是一个使用闭包的传统循环（最好在循环之外定义函数，但我将把它留在这里）：

下面是一个包含所有三个版本的示例。只需取消对要测试的项目的注释，并尝试一下。

试试这个

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink").show();
});

你可以这样做：

$('.column1of4').click(function(){

    $(this); // the current object
    $(this).children('img'); // img in the current object

});

或循环：

$('.column1of4').each(function(){
    ...
});

---

不要将Id用作多个事件的$（'#Id'），请使用.class或[attribute]来执行此操作。

如果使用jQuery，这很容易实现：

$('.column1of4 .spanlink').hide();
$('.column1of4 img').mouseenter(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').show();
});
$('.column1of4 img').mouseleave(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').hide();
});

---

根据标记结构的不同，您可以使用DOM遍历函数，如

.filter（）

，

.find（）

，

.next（）

，来访问所选节点

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink, img").show();
});

---

我将图像移到div中，并使用以下代码：

一般的想法是1）使用一个不是ID的选择器，这样我就可以迭代多个元素，而不用担心以后是否会添加元素2）根据与

$的位置关系定位要隐藏/显示的div（这）

（只有在标记中重复此结构时才起作用）3）在div内移动图像标记（如果没有，则悬停会变得有点混乱，因为在显示图像时位置会发生变化，因此会影响光标是否位于div内

编辑

---

（见评论）.

Hm由于某些原因不起作用，.spanlink甚至不“隐藏”。：/好的，我修改了代码，使图像和文本成为链接，这有区别吗？这不是链接的问题。javascript与pythonRight不同，但提供的代码对我不起作用，它不隐藏#text、#moretext和#evenmoretext:/它只是没有隐藏在开始时，只需添加$（“.spanlink”）.hide（）在第一行之前。我对它进行了测试，它运行OK“在我拥有的基础上构建”似乎隐藏了它，但没有显示它：/这是因为我是个白痴，做了一些非常愚蠢的事情。自从你已经在使用它以来，我已经用jQuery方式进行了更新。#firsttext、#moretext和#EverMoreText。#另外，我修改了代码，使所有内容都是链接，这会有区别吗？好的，那么对于你的代码，我应该忽略（函数（I）{而只做（var I=0；I<3；++I）{$。每个（文本，函数（I）{？还是应该在（函数（I）之后保留这些内容{也在那里？对于

For

循环，肯定需要闭包，但不需要

S.each

。因此可以使用其中一个，但不能真正混合和匹配。

$。each

正在创建一个循环并调用函数（这是在<代码>中为循环创建的相同的东西。我将把它们分开以使它们更清晰。这似乎不隐藏文本容器：/@ @ USE216485。您认为文本容器是什么？我看不到具有文本容器的类或ID的元素。正文container@user216485你的问题中没有这个要求，但我已经更新了我的答案以适应这个要求。请查看我的编辑。

$('.column1of4').each(function(){
    ...
});

$('.column1of4 .spanlink').hide();
$('.column1of4 img').mouseenter(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').show();
});
$('.column1of4 img').mouseleave(function(e){
    e.stopPropagation();
    $(this).parent().find('.spanlink').hide();
});

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink, img").show();
});

$('.column1of4').each(function(){
    $('div', $(this)).each(function(){
        $(this).hover(
            function(){
                //in
                $('img', $(this)).show();
            },
            function(){
                //out
                $('img', $(this)).hide();
            });
    });
});