如何在jQuery中正确使用开关？

Question

如何在jQuery中正确使用开关？

3

  $(document).ready(function() {
    //set all logo images based on data returned from database
    var WinBack = $('div.jWinBackFrom').html();
    switch(WinBack) {
        case '1': //If database returns 1 : set Verizon FiOS logo
        $('div.jWinBackFrom').prepend('<img id="WinBackLogo" src="<?php echo site_url();?>/assets/images/verizon-fios-logo.jpg" />');
        break;

        case '2': //If database returns 2 : set DirecTV logo
        $('div.jWinBackFrom').prepend('<img id="WinBackLogo" src="<?php echo base_url();?>assets/images/directv-logo.jpg" />');
        break;

        case '3': //If database returns 3 : set DISH Network logo
        $('div.jWinBackFrom').prepend('<img id="WinBackLogo" src="<?php echo base_url();?>assets/images/dish-network-logo.jpg" />');
        break;
    }

在页面中，我有一个for循环内部有多个<div class="jWinBackFrom"><?php echo $optimum['cWinBackFrom'][$i]; ?></div>。

想象一下输出是这样的：<div class="jWinBackFrom">1</div>，<div class="jWinBackFrom">2</div>，<div class="jWinBackFrom">3</div>，<div class="jWinBackFrom">2</div>，<div class="jWinBackFrom">1</div>``<div class="jWinBackFrom">3</div>，<div class="jWinBackFrom">1</div>。基本上都是随机的。jQuery需要从所有这些DIV获取值，并将数字值与相关联的图像交换。

请问我这样做是否正确（意思是使用了正确的方法），这是最有效的方法吗？如果不是，那什么方法更好呢？

我需要为许多其他字段重复此过程。我的理论是，让数据库返回简单的值，如1，并使用jQuery动态构建页面速度更快。

感谢帮助！谢谢！

- MrPizzaFace

我觉得最好还是让后端输出相应的图片，而不是让 JavaScript 在整个页面上运行并替换 ID 为图片。这样做只会增加不必要的复杂性，对于可能获得的微小收益来说并不值得。 - James Montagne

@JamesMontagne 是的，你可能是对的。我可以很容易地用一个SWITCH语句在PHP中完成这个任务并获得我想要的输出，但是我正在尝试学习jQuery。我的第二个目标是使页面看起来更加动态。一石二鸟... - MrPizzaFace

2个回答

0

在这种情况/要求下，通常最好创建一个“查找哈希表”：

var hash = {
    1:   'verizon-fios-logo.jpg',
    2:   'directv-logo.jpg',
    3:   'dish-network-logo.jpg'
};

然后你可以这样做

$('div.jWinBackFrom').prepend('<img id="WinBackLogo" src="<?php echo site_url();?>/assets/images/"' + hash[ $('div.jWinBackFrom').html() ] + ' />');

事实证明，在您的情况下，您几乎可以使用普通的Javascript数组而不是普通的对象。您只需要使索引从0开始而不是1即可。

- jAndy

除此之外，还有多个具有该类的div。你需要循环它们。 - James Montagne

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1106925 · Accepted Answer

我对PHP一无所知，但我倾向于将您的选项添加到一个数组中，并查找索引。

var choices = [
    "", // Apparently nothing at index 0
    '<img id="WinBackLogo" src="<?php echo site_url();?>/assets/images/verizon-fios-logo.jpg" />',
    '<img id="WinBackLogo" src="<?php echo base_url();?>assets/images/directv-logo.jpg" />',
    '<img id="WinBackLogo" src="<?php echo base_url();?>assets/images/dish-network-logo.jpg" />'
]

$(document).ready(function() {
    $('div.jWinBackFrom').html(function(i, htm) {
        return choices[htm];
    });
});