Changing url depending on data attribute with jQuery

Question

I have many images on a webpage with class name .champions-category Each of them has a data attribute called data-window coming dynamically from database. What I want to do is to check every element with class .champions-category and depending on the content of data-window 's content to change image's 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">

Suppose it's some kind of each and then if else statement but don't know where to start from.

Answer 1

To start with you can try attribute selector

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

You can replace teamwork with whatever later. You can play around with the business logic on how to decide the url.

Answer 2

You can do it using using jQuery Each and then using a switch statement to change the image based on the data attribute .

Here's a working example:

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

using 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

The following will replace the src with the contents of the 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

A lot has been said already, but let me add my 2 cents to this question.

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

We can use data-window attribute data to assign the image sources as coded above. img_urls json can contain the image sources for all the possible data-window values.