1

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

基本上，我有 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 代码吗？

4

7 回答 7

2

尝试这个

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink").show();
});
于 2013-07-18T00:03:12.670 回答
0

我将图像移动到 div 中并使用了这个代码，一个工作示例：

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

总体思路是 1) 使用不是 ID 的选择器，因此我可以迭代多个元素，而不必担心以后是否会添加以后的元素 2) 根据位置关系定位要隐藏/显示的 div $(this)（仅在以下情况下才有效您在标记中重复此结构） 3）将图像标签移动到 div 内（如果不这样做，则悬停会变得有点刺眼，因为在显示图像时位置会发生变化，因此会影响光标是否在内部div 与否。

编辑

更新了小提琴的附加要求（见评论）。

于 2013-07-18T00:22:41.137 回答
0

为什么不

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

它甚至不需要ID。

于 2013-07-18T00:02:35.263 回答
0

所以，你会这样做的方式，给定你的 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();
    });
});

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

于 2013-07-18T00:03:05.607 回答
0

你能行的 ：

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

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

});

或循环：

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

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

于 2013-07-18T00:04:35.977 回答
0

如果您使用的是 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();
});
于 2013-07-18T00:05:28.797 回答
0

根据您的标记结构，您可以使用 DOM 遍历函数，如.filter(), .find(),.next()来到达您选择的节点。

$(".column1of4").hover(function(){
    $(".spanlink").hide();
    $(this).find(".spanlink, img").show();
});
于 2013-07-18T00:06:37.443 回答