Question

当我调用此函数时，页面页面上的每个图像的src都替换为图像data-src属性：

function showAllImg(param) {    
    $("img").each(function (index, element) {
        $(this).attr("src", $(this).attr("data-src"));
    });
}

如何有选择地应用此功能？如果单击trigger-3，我想将src替换为前三个图像。如果单击trigger-6，我想换掉前6个。稍后我可能会这样做，所以单击其他div将更改特定图像的src。基本上我想要很多很多种方法将这个功能应用于图像。

$('.trigger-3').click(function(){
    $(".selector img").slice( 3 ).showImg();
});

$('.trigger-6').click(function(){
    $(".selector img").slice( 6 ).showImg();
});

function showImg(param) {
    $(this).attr("src", $(this).attr("data-src"));
}

<div class="trigger-3">Change first 3</div>
<div class="trigger-6">Change first 6</div>

<ul>

            <li>
                <img data-src="img/1.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/2.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/3.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/4.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/5.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/6.jpeg" src="whatever.jpeg" />
            </li>
                <img data-src="img/1.jpeg" src="whatever.jpeg" />
            </li>
</ul>

Answer 1

你正在实现自己想要的目标。首先，.slice是要走的路，但第一个参数是指数开始，而第二个参数是指数结束（排除）。

所以，你的切片应该是这样的：

$(".selector img").slice(0, 3);

然后，你的showImg是一个函数，而不是一个jQuery方法，所以你不能这样调用它。因此，您要么使用$.fn.showImg创建jQuery方法，要么使用.each()并传递您的函数：

$(".selector img").slice(0, 3).each(showImg);

Answer 2

使用index中的jQuery.each()，如下例所示：

function showAllImg(param) {    
    $("img").each(function (index, element) {
        if (index < 3) {
            $(this).attr("src", $(this).attr("data-src"));
        }
    });
}

这将取代前3个元素的来源。

使用jQuery.slice()（参见Karl-AndréGagnon的答案）你实际上在通过each循环之前减少了元素集，这在性能方面会更好。

编辑：关于您的编辑，您可以使用数据属性做得更好（这样您就不需要每个触发器元素的事件侦听器）：

<强> HTML ：

<div class="trigger" data-slice="3">Change first 3</div>
<div class="trigger" data-slice="6">Change first 6</div>

<强> JS ：

$('.trigger').click(function() {
    $(".selector img").slice($(this).data('slice')).each(showImg);
});

Answer 3

根据你的功能，你可以在foreach循环中使用你的索引：

function swapImages(howMany) {    
    $("img").each(function (index, element) {
        if(index < howMany) {
            $(this).attr("src", $(this).attr("data-src"));
        } else {
            return;
        }
    });
}

$('#buttonToSwap').click(function(){
    swapImages(3);
});

将jQuery函数应用于第一个x结果选择器？

3 个答案: