使用jQuery根據數據屬性更改URL

Question

我在網頁上有許多圖像，它們的類名為.champions-category，每個圖像都有一個名為data-window的數據屬性，這些屬性是從數據庫動態獲取的。 我要做的是檢查類.champions-category的每個元素，並根據數據窗口內容的內容更改圖像的src 。

<img src="" class="champions-category" data-window="teamwork">
<img src="" class="champions-category" data-window="focus">
<img src="" class="champions-category" data-window="results">

假設每個都是某種，然后是else語句，但不知道從哪里開始。

Answer 1

首先，您可以嘗試屬性選擇器

$("img.champions-category[data-window='teamwork']").attr("src", "/path")

以后您可以用任何其他方式代替團隊合作 。 您可以嘗試如何確定URL的業務邏輯。

Answer 2

您可以使用jQuery Each ，然后使用switch語句根據data attribute更改圖像。

這是一個工作示例：

 $('.champions-category').each(function(){ var getDataAttribute = $(this).attr('data-window'); switch (getDataAttribute) { case 'teamwork': $(this).attr('src','http://via.placeholder.com/20x200') break; case 'focus': $(this).attr('src','http://via.placeholder.com/40x200') break; case 'results': $(this).attr('src','http://via.placeholder.com/60x200') } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="" class="champions-category" data-window="teamwork"> <img src="" class="champions-category" data-window="focus"> <img src="" class="champions-category" data-window="results"> 

Answer 3

使用jQuery .each：

$('img.champions-category').each(function() {
   var self = $(this),
      type = self.data('window');

   if (type === 'teamwork') self.attr('src', 'teamwork-src-value-here.png');

  //etc
});

Answer 4

以下內容將src替換為data-attribute的內容：

$('.champions-category').each(function () {
  var $this = $(this);
  var windowData = $this.data('window');
  // Do data validation and manipulation here if needed.
  $this.attr('src', windowData);
});

Answer 5

$(document).ready(function(){
   $("img.champions-category[data-window]").each(function(){
       var self = $(this);
       self.attr("src",self.data("window")+".png");
   });
});

Answer 6

已經講了很多話，但讓我在這個問題上加2美分。

 img_urls = { "teamwork": "https://cdn4.iconfinder.com/data/icons/business-management-set-4-1/256/5-128.png", "focus": "https://heyfocus.com/assets/img/icon/FocusActiveAppIcon128px.png", "results": "https://www.shareicon.net/data/128x128/2016/09/05/825358_file_512x512.png", "question": "https://image.flaticon.com/icons/png/128/25/25400.png" } $("img.champions-category").each(function() { $(this).attr("src", img_urls[$(this).data("window")]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="" class="champions-category" data-window="teamwork"> <img src="" class="champions-category" data-window="focus"> <img src="" class="champions-category" data-window="results"> 

我們可以使用data-window屬性數據來分配圖像源，如上所述。 img_urls json可以包含所有可能的data-window值的圖像源。