jquery - 使用循环优化 Jquery

Question

我有这个代码:

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

还有更多，但我认为文件可以更小，甚至可以使用循环重用，但我无法将描述(HTML 方法)与选择器绑定(bind)。

我想使用这样的东西:

              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/