我如何更改選擇列表項的背景圖像？

項目1 項目2 項目3

，我需要有一個背景圖像（箭頭）出現在每個選擇。如果用戶單擊項目2，箭頭將從第1項消失，並出現在ITEM2等

我嘗試財產以後這樣的，但不知道...

  <script> 
       $(".theSteps li").change(function() { 
       $(".theSteps li:selected").each(function() { 
       $('.theSteps li').css('background-image','url()'); 
       }); 
       $('.theSteps li').css('background-image','none'); 
       }) 
       .trigger('change'); 

      </script>

來源

2013-02-22 user1106295

你究竟如何得到LI元素來改變和選擇？ – adeneo 2013-02-22 14:49:25

你在'$（'。theSteps li'）。css（'background - image'，'url（）'）;' – letiagoalves 2013-02-22 14:50:01

好，我已經得到了有效的解決方案爲您服務。所有你需要做的是改變輝光類爲背景圖像（和梳理定位等）

http://jsfiddle.net/jezzipin/5J698/

由於有些人以上都在評論說，要做到這一點的最好辦法是使用一個css類，它只對你剛纔單擊的元素有效。在我的例子中，我稱之爲這個類的發光 - >

.glow{ 
background-color: #FF0000; 
}

它只會將元素的背景顏色更改爲紅色。

現在爲jQuery函數（可以是來自不同的小提琴作爲自動調用的document.ready（）） - >

jQuery(document).ready(function() { 
      $('.theSteps').click(function() { 
      $('.theSteps').removeClass('glow'); 
      $(this).addClass('glow');    
    }); 

    });

該函數將刪除所有元素輝光類與類.theSteps和然後將其應用於剛纔點擊過的元素，我們可以用$（this）引用它。

來源

2013-02-22 15:21:12 jezzipin

您沒有提供HTML，所以創建您需要的完整JavaScript非常困難。如果你可以添加它，我可以給你更多的細節。

最簡單的方法是創建一個CSS類，用於將背景圖像設置爲您要使用的圖像的背景圖像。

如果你在選擇你的列表項運行功能，您可以運行jQuery函數addClass添加新的類來指定背景圖像到選擇的項目 - 類似：

$('#mylistitem').addClass('BackgroundImageClassName');

在此之前行，你可以使用任何現有的項目刪除類：

$('li.BackgroundImageClassName').removeClass('BackgroundImageClassName');

假設你的HTML看起來像：

<ul class="theSteps"> 
    <li>first item</li> 
    <li>second item</li> 
</ul>

您可以使用這樣的代碼：

$('ul.theSteps li').click(function() { 
    $('li.newBackgroundImageClass').removeClass('newBackgroundImageClass'); 
    $(this).addClass('newBackgroundImageClass'); 
});

來源

2013-02-22 14:49:49 Marryat

好吧，謝謝，你能給我一個工作的例子嗎？ HTML是不需要的，即時通訊只是使用列表元素內聯顯示。其jQuery/JavaScript我需要。 – user1106295 2013-02-22 14:59:32

我已更新了示例HTML和更完整的代碼。我需要html，以便我可以選擇正確的項目。 @ user1106295 – Marryat 2013-02-22 15:11:40

這將帶走每個圖像，如果我點擊另一個？例如，每次點擊只能看到一個圖像？ – user1106295 2013-02-22 15:12:07

我如何更改選擇列表項的背景圖像？

回答

相關問題