Javascript 使用jQuery根据数据属性更改url

我在一个网页上有许多类名为的图片。冠军类别 它们中的每一个都有一个称为“数据窗口”的数据属性，该属性动态地来自数据库。我想做的是用class.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">

假设它是某种形式的each，然后是if-else语句，但不知道从何处开始。

要开始，您可以尝试

---

以后你可以用什么来代替团队合作。您可以使用业务逻辑来决定url。

您可以使用jQuery

每个

然后使用switch语句根据

数据属性更改图像

下面是一个工作示例：


$（'.champions category'）。每个（函数（）{
var getDataAttribute=$（this.attr（'data-window'）；
开关（getDataAttribute）{
“团队合作”案例：
$（this.attr（'src'，'http://via.placeholder.com/20x200')
打破
案例“焦点”：
$（this.attr（'src'，'http://via.placeholder.com/40x200')
打破
案例“结果”：
$（this.attr（'src'，'http://via.placeholder.com/60x200')
}
});

使用jQuery。每个：

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

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

  //etc
});

以下内容将用数据属性的内容替换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);
});

已经说了很多，但让我在这个问题上再加上我的2美分


img\u URL={
“团队合作”：https://cdn4.iconfinder.com/data/icons/business-management-set-4-1/256/5-128.png",
“焦点”：https://heyfocus.com/assets/img/icon/FocusActiveAppIcon128px.png",
“结果”：https://www.shareicon.net/data/128x128/2016/09/05/825358_file_512x512.png",
“问题”：https://image.flaticon.com/icons/png/128/25/25400.png"
}
$（“img.champions类别”）。每个（函数（）{
$（this.attr（“src”，img_url[$（this.data（“window”）））；
});

从一个each和一个if-else开始，如果这是您认为需要的。研究这些命令，找出如何选择所需的元素，自己尝试一下。有趣的是，您提到数据窗口值来自数据库，因此您必须更改“src”属性……对于它可以指定为什么，是否存在一些不确定性？e、 g.“团队合作”的窗口值总是导致相同的“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);
});

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