将鼠标悬停在for循环中

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

演示： 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);
}