如何在jQuery中正確使用開關？

$(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>。如何在jQuery中正確使用開關？

所以，想象的<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動態構建頁面會更快。

我很感激幫助！謝謝！這樣

來源

2013-04-07 fyz

我想我只是堅持讓後端輸出適當的圖像，而不是讓JavaScript運行整個頁面，用圖像替換id。不必要的複雜性看起來像是一筆小小的收益（如果有的話）。 – 2013-04-07 03:36:17

@JamesMontagne是的，你可能是對的。我只需用SWITCH語句就可以輕鬆地在PHP中執行此操作，並獲得所需的輸出，但我正在嘗試學習jQuery。我的第二個目標是使頁面顯得更加動態。用一塊石頭殺死兩隻鳥... – fyz 2013-04-07 03:42:49

我對PHP一無所知，但我傾向於將您的選項添加到Array中，並對索引進行查找。

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]; 
    }); 
});

來源

2013-04-07 03:27:54

這是一個很容易的解決方法，但是這會使數字值在應該被替換時仍然在div內。 – 2013-04-07 03:31:20

@JamesMontagne：你說得對。我更新爲使用'.html（）'。 – 2013-04-07 03:33:11

你們搖滾！謝謝：） – fyz 2013-04-07 03:44:27

在情況/要求，它通常最好創建一個查找散：

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 Array而不是普通的Object。您只需要在0而不是1開始索引。

來源

2013-04-07 03:26:10 jAndy

除了那個級別有多個div。你必須循環它們。 – 2013-04-07 03:27:04

如何在jQuery中正確使用開關？

回答

相關問題