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();
    });
});

这是一个包含所有三个版本的fiddle。只需取消注释您要测试的那个并开始尝试。

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中移动了图片并使用了这段代码a working example：

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

一般的想法是1）使用不是ID的选择器，所以我可以迭代几个元素而不用担心以后是否会添加未来的元素2）找到div来隐藏/显示基于与{{的位置关系的位置1}}（只有在你的标记中重复这个结构才会起作用）3）在div中移动图像标签（如果你没有，那么悬停得到一点spazzy，因为当显示图像时，定位被改变了，因此影响光标是否在div内。

修改

Updated fiddle for additional requirements（见评论）。

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

7 个答案:

修改