Question

我需要改进我的jquery代码，我重复我的功能6次！有没有做一个循环来缩短代码？

(function( jQuery ){
    jQuery.fn.vesta = function(imgN){
        var imgPath = "http://localhost:8080/mhost/media/magentohost/vesta/vesta"
        var currImg = imgPath + imgN + ".png";
        var targetImg = jQuery('.img-browser img');
        jQuery('.img-browser img').attr('src', currImg);
    }
})( jQuery );

jQuery('.vesta1').on('click', function (e) {
    jQuery('.vesta1').vesta(1);
});
jQuery('.vesta2').on('click', function (e) {
    jQuery('.vesta2').vesta(2);
});
jQuery('.vesta3').on('click', function (e) {
    jQuery('.vesta3').vesta(3);
});
jQuery('.vesta4').on('click', function (e) {
    jQuery('.vesta4').vesta(4);
});
jQuery('.vesta5').on('click', function (e) {
    jQuery('.vesta5').vesta(5);
});
jQuery('.vesta6').on('click', function (e) {
    jQuery('.vesta6').vesta(6);
});

Answer 1

您可以使用公共类和data属性来指定要发送到vesta函数的参数来解决此问题：

<div class="vesta" data-vesta="1">1</div>
<div class="vesta" data-vesta="2">2</div>
<div class="vesta" data-vesta="3">2</div>

然后根本不需要循环：

$('.vesta').on('click', function (e) {
    $(this).vesta($(this).data('vesta'));
});

Answer 2

只需将其置于for循环中，并利用JavaScript的动态特性：

for (var i = 1; i <= 6; i++) {
    $('.vesta' + i).on('click', (function (index) {
        return function (e) {
            $('.vesta' + index).vesta(index);
        };
    })(i));
}

Answer 3

使用公共类和数据属性

jQuery('.vesta').on('click', function (e) {
    var elem = $(this);
    elem.vesta(elem.data("ind"));
});

和HTML

<div class="vesta vesta1" data-ind="1">

Answer 4

我想你需要this引用以及一些hack类型的东西

$('[class*=vespa]').on('click', function(e){
    $(this).vesta(+(this.className.match(/vespa(\d+)/)[1]))
});

在这里，我们捕获具有至少匹配vespa的类的元素，然后我们使用一些正则表达式来匹配vespa之后的数字和+一元运算符更改{ {1}}数字版本为实际数字。

Answer 5

如果可以改变HTML的结构，那将非常容易。您可以将所有元素设为同一个类，例如vesta。但你也给他们一个属性，比如data-number。例如，像这样：

<div class="vesta" data-number="4"></div>

然后，您的jQuery代码将简单如下：

$(document).on({
    click: function() {
        var $this = $(this),
            number = +$this.data('number');

        $this.vesta(number);
    }
}, '.vesta');

Answer 6

编辑：我在解释一小时前提供的代码片段时有点懒，但我现在正在修改我的帖子以回应评论。

此代码段允许您将“.vesta1”元素的侦听器应用于“.vestaN”

[@变量]

NumberOfClasses - 是'vesta'之后的正整数。例如：vesta1，vesta2，vesta100等等

var NumberOfClasses=6;
for(var i=1;i<=NumberOfClasses;i++){
    var className = '.vesta'+(i+1);
    jQuery(className ).on('click', function (e) {
        $(this).vesta(i);
    });
}

多次重复jquery函数

6 个答案: