0

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

1 回答 1

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函数并传递数组值来完成的。

我建议的一件事是将textsandpictures数组组合成一个对象，例如：

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

并像这样循环：

var curText, curPicture;
for (curText in textPics) {
    curPicture = textPics[curText];
    generateHandlers(curText, curPicture);
}
于 2013-07-18T02:16:57.453 回答