如何根據其內容更改跨度的背景圖像？

我不知道是否有人可以幫助這個。我試圖根據其內容更改跨度的背景圖像。我已經花了幾天的時間來搜索這些內容，但卻無法提供任何內容。如何根據其內容更改跨度的背景圖像？

的HTML的結構是這樣的：

<span id="foo" class="bar"> 
    Gallery 
</span>

而且，一旦跨度已經被點擊，它改變：

<span id="foo" class="bar"> 
    List 
</span>

我有一個去與jQuery而來與此：

$(window).load(function(){ 
    $("span#foo").each(function() { 
     var $el = $(this); 
     var image; 
     var content = $el.text().toLowerCase(); 
     if (content.indexOf("gallery") !== -1) { 
      image = "url(http://www.example.co.uk/images/foursquares.png) 14px 6px/10px 10px no-repeat"; 
     } 
     else if (content.indexOf("list") !== -1) { 
      image = "url(http://www.example.co.uk/images/threelines.png) 14px 6px/10px 10px no-repeat"; 
     } 
     if (image) { 
      console.log("if"); 
      .css("background", image); 
     } 
    }); 
});

（我已經複製並編輯從一個其他職位，作者想改變毗鄰div的背景顏色，但我找不到它），但它什麼也沒有做。

任何人都可以提供的幫助，將不勝感激。

隨着親切的問候，

馬克

來源

2016-07-18 SYPOMark

'$（「＃跨度富」）each'？你不應該有重複的ID。 ID應該是唯一的。 –

如果你用'click'替換'each'，你有什麼？ Andf btw，這個'.css（「背景」，圖像）''沒有意義 –

@ A.Wolff：看起來像OP已經有點擊事件的跨度。這是切換文本畫廊和列表 –

試試這個，添加toLowerCase（）函數來你的if語句然後更改「背景」到「背景圖片」

$(window).load(function(){ 
$("span#foo").each(function() { 
    var $el = $(this); 
    var image; 
    var content = $el.text().toLowerCase(); 
    if (content.toLowerCase().indexOf("gallery") !== -1) { 
     image = "url(http://www.example.co.uk/images/foursquares.png) 14px 6px/10px 10px no-repeat"; 
    } 
    else if (content.toLowerCase().indexOf("list") !== -1) { 
     image = "url(http://www.example.co.uk/images/threelines.png) 14px 6px/10px 10px no-repeat"; 
    } 
    if (image) { 
     console.log("if"); 
     $el.css("background-image", image); 
    } 
}); 
});

來源

2016-07-18 08:51:18 dresdain

您可能的意思是：'$ el.css（「background-image」，image）;' –

對不起，是的。更新。 – dresdain

你好，感謝大家的快速響應。我輸入了@dresdain回答，但行'console.log（「if」）;'似乎顯示錯誤。爲了給這個問題提供一些背景知識，我正在爲客戶設計一個eBay商店，並希望改變切換Gallery/List的背景，而不是使用文本讓客戶知道他們目前正在看到哪個視圖。 – SYPOMark

Thank-你幫助所有的人。可能是由於我自己的無能，我無法得到上述答案的工作，所以去了一個更簡單的選擇...

而不是改變背景圖像，基於span的內容，我決定改變HTML根據其內容，如：

$(document).ready(function() { 
    $('span#foo:contains("Gallery")') 
     .html('<img src="http://www.example.co.uk/images/foursquares.png"');   
    $('span#foo:contains("List")') 
     .html('<img src="http://www.example.co.uk/images/threelines.png"'); 
})

隨着親切的問候，

馬克

來源

2016-07-18 12:56:53 SYPOMark

如何根據其內容更改跨度的背景圖像？

回答

相關問題