Question

我需要更改此代码

<script>
$(function(){
    var $name = $('.gallery a').simpleLightbox();
</script>

动态添加('.gallery1 a'),('.gallery2 a'),('.gallery3 a') 任何帮助，请

Answer 1

将名称发送到此功能

function yourFunction (dynamicGallary){
    var $name = $("." + dynamicGallary + " a").simpleLightbox();
}

yourFunction("gallary1");

Answer 2

亚当的回答基本上是正确的。这是如何使用它的具体示例。而不是像这样编写重复的代码：

$(function(){
    var $name = $('.gallery1 a').simpleLightbox();
    var $name = $('.gallery2 a').simpleLightbox();
    var $name = $('.gallery3 a').simpleLightbox();
    // etc. etc.
});

有了他的功能，你可以写下来：

$(function(){
    function applySimpleLightboxToAChild(dynamicGallary){
        var $name = $("." + dynamicGallary + " a").simpleLightbox();
    };

    for (var i = 1; i <= 3; i++) {
        applySimpleLightboxToAChild('gallery' + i);
    }
});

成功抽象出任何重复代码 - 利用Javascript中的+运算符将数字转换为字符串这一事实，以便当i = 1时'gallery' + i转换为gallery1 ，等等。（如果您愿意，可以使用模板文字，如frankmackey的答案：代替'gallery' + i，您可以写`gallery${i}`。）

Answer 3

我并不完全确定您要完成的任务，但一般来说，由于安全性和效率原因，不鼓励使用JavaScript进行反思性编程。

因此，假设这些图库类元素在格式方面完全相同（不包括其内容），您可以将其所有类更改为.gallery。然后，您可以使用JQuery选择器获取具有<a>属性的所有class="gallery"元素，并使用nth-child选择器检索它们：

function getName(i) {
    return $(`.gallery a:nth-child(${i})`).simpleLightbox();
}

编辑：

看到上述答案的讨论，这是另一种解决方案。

function getName(i) {
    return $(`.gallery${i} a`).simpleLightbox();
}

Answer 4

var totalLength = 5; // get your length by class name or Id name
for(var i = 0; i < totalLength; i++)
{
    var myVar = '.gallary'+i;
    $(myVar+' a').simpleLightbox();
}

制作动态变量名称

4 个答案: