使用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值的图像源。