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

Question

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

基本上，我有3张图片，所有图片均具有相同的类别，不同的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>

这是id =“ firsttext”的Javascript：

$('#firstextt').hide();
$('#first, #firsttext').hover(function(){
 //in
  $('#firsttext').show();

},function(){
 //out
  $('#firsttext').hide();
});

因此，当用户将鼠标悬停在#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代码？

Answer 1

尝试这个

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

Answer 2

为什么不

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

它甚至不需要ID。

Answer 3

因此，鉴于您的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'];

这是使用闭包的传统循环（最好在循环外部定义函数，但为此我将其保留在此处）：

// You could also do var length = text.length and replace the "3"
for ( var i = 0; i < 3; ++i ) {
    // create a closure so that i isn't incremented when the event happens.
    (function(i) {
        $(text[i]).hide();
        $([text[i], picture[i]].join(',')).hover(function() {
            $(text[i]).show();
        }, function() {
            $(text[i]).hide();
        });
    })(i);
}

下面是使用$.each遍历该组。

$.each(text, function(i) {
    $(text[i]).hide();
    $([text[i], picture[i]].join(', ')).hover(function() {
        $(text[i]).show();
    }, function() {
        $(text[i]).hide();
    });
});

这是所有三个版本的小提琴 。 只需取消注释您要测试的那个，然后试一试即可。

Answer 4

你能行的 ：

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

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

});

或循环：

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

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

Answer 5

如果您使用的是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();
});

Answer 6

根据您的标记结构，你可以使用DOM遍历功能，如.filter() .find() .next()到你选择的节点。

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

Answer 7

我将图像移到div内，并使用此代码（ 一个有效的示例） ：

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

一般想法是1）使用不是ID的选择器，这样我就可以迭代几个元素而不必担心以后是否会添加将来的元素2）根据与$(this)位置定位div以隐藏/显示（仅当您在标记中重复此结构时，此方法才有效）3）将图像标签移至div内（如果不这样做，则悬停会有点混乱，因为在显示图像时会改变位置，因此影响是否光标是否在div内。

编辑

更新了小提琴以获取其他要求 （请参阅评论）。