Question

我有这段代码：

            $('.counter_d').mouseover(function() {
                   $('#description').html('Counter');
             });
            $('.selector_d').mouseover(function() {
                   $('#description').html('Selector');
             });
             $('.date_d').mouseover(function() {
                   $('#description').html('Date');
             });

以及其他几个，但我认为文件可能更小，甚至可以使用循环重复使用，但我无法将描述（HTML方法）与选择器绑定。

我想使用类似的内容：

              var selectors=['.counter_d','.selector_d','.date_d'];
              var description=['Counter', 'Selector', 'Date'];


              for(var i=0; i<selectors.length; i++)
                 $(selectors[i]).mouseover(function() {
                   $('#description').html(description[i]);
                 });

有任何帮助吗？谢谢

Answer 1

var selectors = {
    '.counter_d': 'Counter',
    '.selector_d': 'Selector',
    '.date_d': 'Date'
};


$.each(selectors, function (key, value) {
    $(key).mouseover(function () {
        $("#description").html(value);
    });
});

示例： http://jsfiddle.net/andrewwhitaker/bS28q/

Answer 2

问题是在执行鼠标悬停回调时将变量i分配给3 由于description[3]为undefined，因此不会分配新的HTML Fiddle 使您的浏览器控制台能够读取console.log！

我认为更优雅的解决方案是为HTML元素提供额外的属性description，并在mouseover回调中简单地执行：

$('#description').html($(this).attr("description"));

（你在上面的小提琴中看到它）

在我看来，你甚至可以以更优雅的方式选择所有元素并摆脱循环，因为jQuery会为你处理这个：

$(".counter_d, .selector_d, .date_d").mouseover(function() {
    $('#description').html($(this).attr("description"));
});

updated Fiddle

Answer 3

由于已经提供了正确的解决方案（Andrew Whitaker's accepted answer是我的最爱），我实际上会告诉你你的代码有什么问题（yoshi's answer有一些线索，但没有详细解释。）

问题

问题是，即使i的值在循环内发生变化，但在执行时，i保持不变（与for循环结束时相同））当执行事件处理程序时。

您的代码中真正发生了什么

证明看起来像这样（见jsfiddle）：

var selectors=['.counter_d','.selector_d','.date_d'];
var description=['Counter', 'Selector', 'Date'];

for(var i=0; i<selectors.length; i++)
    $(selectors[i]).mouseover(function() {
        $('#description').html(i); // i is always equal to 3
    });

问题是事件处理程序使用来自外部作用域的i，这在处理程序执行时等于3。因此，即使i变量具有附加处理程序时所需的值，该值也会在执行之前发生更改。

解决方案

要解决这个问题，你可以稍微修改你的代码，使用匿名函数，然后通过传递它来正确调用{ - 1}}的正确值：

要证明它正常工作：http://jsfiddle.net/ZQ6PB/

查看更多

JavaScript closure inside loops - simple practical example，

Answer 4

我会选择这样的事情：

var obj = {
    'a': 'content a',
    'b': 'content b',
    'c': 'content c'
};

$('.a,.b,.c').mouseover(function() {
    $('#d').html(obj[this.className]);
});

DEMO

不太喜欢循环理念，因为它使它的可读性低得多。

UPD：您可以随时扩展解决方案以获得更多类

var obj = {
    '.a': 'content a',
    '.b': 'content b',
    '.c': 'content c'
};

var selector = Object.keys(obj).join(',');
$(selector).mouseover(function() {
    $('#d').html(obj['.' + this.className]);
});

DEMO

Answer 5

看起来您的选择器都以_d结尾。我们可以做到以下几点似乎是合理的。

$('[class$=_d]').mouseover(function(){
    var str = $(this).prop('class').split('_')[0];
    var desc = str.charAt(0).toUpperCase() + str.slice(1);
    $('#description').html(desc);
});

Answer 6

按如下方式构造HTML（假设元素是跨度）...

<span class="d counter_d" data-desc="Counter">...</span>
<span class="d selector_d" data-desc="Selector">...</span>
<span class="d date_d" data-desc="Date">...</span>

...允许javascript像这样简单：

var $description = $("#description");

$(".d").mouseover(function() {
    $description.text($(this).data('desc'));
});

类名'.counter_d'，'。selector_d'，'。date_d'是多余的，可以删除，除非出于某些其他原因需要它们 - 例如。样式。

当然，如果你有数百个这样的元素，那么HTML将是一个手工编写的痛苦。用另一种方法会更好。

使用循环优化Jquery

6 个答案:

问题

您的代码中真正发生了什么

解决方案

查看更多