Question

这是HTML：

<div class=column1of4>
    <a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" 
       title="Bottle in the  mirror">
        <img src="images/250-width/pic1.jpg" 
             alt="" width="250px" height="250px"
             id="Bottleinthemirrorpic">
    </a>
    <a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" 
       title="Bottle in the mirror">
        <div id="Bottleinthemirror" class="spanlink">
            <p>Bottle in the mirror</p>
        </div>
    </a>
</div>

这是Javascript：

var texts = ['#Bottleinthemirror'];
var picture = ['#Bottleinthemirrorpic'];

for ( var i = 0; i < 1; ++i ) {

$.each(texts, function(i) {
    $(this).hide();
    $([this, picture[i]]).hover(function() {
        $(this).show();
    }, function() {
        $(this).hide();
    });
});

基本上，当我将鼠标悬停在#Bottleinthemirrorpic上时，我希望#Bottleinthemirror显示出来，当我将鼠标悬停在其中时，我希望#Bottleinthemirror消失。

我想要for循环因为我要在文本和图片中添加更多元素，我只是想知道为什么Javascript不起作用？它似乎不隐藏#Bottleinthemirror。

此代码有效，但我希望能够遍历文本和图片中的元素，这就是我不使用此代码的原因：

$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function() {
  // in
  $('#Bottleinthemirror').show();
}, function() {
  // out
  $('#Bottleinthemirror').hide();
});

Answer 1

嵌套循环是不必要的，其中数组是一维的。您可以尝试以下方式：

var texts = ['#Bottleinthemirror'],
    pictures = ['#Bottleinthemirrorpic'],
    i, j, curText, curPicture, generateHandlers;

generateHandlers = function (text, picture) {
    $(text).hide();
    $(text + "," + picture).hover(function () {
        //in
        $(text).show();
    },function () {
        //out
        $(text).hide();
    });
};

for (i = 0, j = texts.length; i < j; i++) {
    curText = texts[i];
    curPicture = pictures[i];
    generateHandlers(curText, curPicture);
}

DEMO： http://jsfiddle.net/hQ8xt/

循环中绑定事件的直接问题是当循环结束时事件被触发稍后。所以到那时，迭代器（在本例中为i）已达到最后一个值（在本例中为j）。您需要创建一个新的范围来捕获数组中的值，这就是我通过调用generatedHandlers函数并传递数组值来完成的。

我建议的一件事是将texts和pictures数组合并到一个对象中，例如：

var textPics = {
    '#Bottleinthemirror': '#Bottleinthemirrorpic'
};

然后循环：

var curText, curPicture;
for (curText in textPics) {
    curPicture = textPics[curText];
    generateHandlers(curText, curPicture);
}

for循环中的悬停效果

1 个答案: