Question

我有一个简单的功能，我想运行3次。我没有使用相同的函数，而是想创建某种IF语句，如果banner = banner class，则变量=相关变量。

我只是不确定如何说出我的问题。

任何帮助都会很棒！

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

    if ($('.banner-01')) {
        var $someText = $banner1;
    }

    if ($('.banner-02')) {
        var $someText = $banner2;
    }

    if ($('.banner-03')) {
        var $someText = $banner3;
    }

$('.banner-01 .info').each(function(){
    $(this).html($someText);

});

$('.banner-02 .info').each(function(){
    $(this).html($someText);
});

$('.banner-03 .info').each(function(){
    $(this).html($someText);
});

Answer 1

您根本不需要if语句。

你想要的是用每个类迭代每个元素并将文本设置为适当的变量。

$('.banner-01')使用＆＃34; banner-01＆＃34;获取所有元素的数组。类。然后，您可以使用each为每个操作执行操作，如下所示：

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

$('.banner-01').each(function () {
    $(this).html($banner1);
});

$('.banner-02').each(function () {
    $(this).html($banner2);
});

$('.banner-03').each(function () {
    $(this).html($banner3);
});

然后，你启动一个方法一次，而不是一次每个元素。

在某一刻，$someText将始终以'Even More Text'结束（因为$('.banner-03')将始终返回一个值，因此条件将评估为true）。将$someText设置为3次并达到最终值后，您将浏览每个类的所有元素并将其全部设置为'Even More Text'。

按照您的代码说明问题：

var $banner1 = 'Some Text',
    $banner2 = 'Some More Text',
    $banner3 = 'Even More Text',
    $someText;

if ($('.banner-01')) {
    // 1. Sets $someText to 'Some Text'
    var $someText = $banner1;
}

if ($('.banner-02')) {
    // 2. Sets $someText to 'Some More Text'
    var $someText = $banner2;
}

if ($('.banner-03')) {
    // 3. Sets $someText to 'Even More Text'
    var $someText = $banner3;
}

// From this point on, $someText is 'Even More Text'.

$('.banner-01 .info').each(function(){
    // 4. Sets elements with banner-01 class to 'Even More Text'
    $(this).html($someText);

});

$('.banner-02 .info').each(function(){
    // 5. Sets elements with banner-02 class to 'Even More Text'
    $(this).html($someText);
});

$('.banner-03 .info').each(function(){
    // 6. Sets elements with banner-03 class to 'Even More Text'
    $(this).html($someText);
});

Answer 2

假设我理解你要做的事情，我认为这会奏效：

var $banner1 = 'Some Text',
$banner2 = 'Some More Text',
$banner3 = 'Even More Text',

if ($('.banner-01')) {
    $('.banner-01 .info').each(function(){
        $(this).html($banner1);
    });
}

if ($('.banner-02')) {
    $('.banner-02 .info').each(function(){
        $(this).html($banner2);
    });
}

if ($('.banner-03')) {
    $('.banner-03 .info').each(function(){
        $(this).html($banner3);
    });
}

实际上你甚至不需要if语句，因为如果找不到元素，你将有一个空数组，只会跳过each函数。

Answer 3

您可以尝试类似下面的代码。无论您拥有多少横幅，这都会增加它的优势。

var banners = ["Some Text", "Some More Text", "Even More Text"]; // Store banner text in an array.
for(var counter = 0; counter < banners.length; counter++) {
    var sel = ".banner-"; // Set selector prefix
    if(counter < 10) sel += "0"; // Add 0 if less than 10
    sel += counter + " .info"; // Add suffix
    $(sel).html(banners[counter]); // Set banner html
}

jQuery - if element =（class）then variable =（variable）

3 个答案: