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">

假设它是某种形式，然后是if else语句但不知道从哪里开始。

Answer 1

首先，您可以尝试attribute selector

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

您可以稍后将团队合作替换为。您可以使用业务逻辑来决定如何确定网址。

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

以下内容将使用data-attribute的内容替换src：

$('.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美分。

＆＃13;

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

＆＃13;

<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">

＆＃13;

我们可以使用data-window属性数据来分配上面编码的图像源。 img_urls json可以包含所有可能的data-window值的图像源。

使用jQuery根据数据属性更改URL

6 个答案: