Форум

Tipylja · #1 (**permalink**) 17.04.2017, 08:56

Здравствуйте, я новичок в js прошу помочь со скриптом. Нужно менять содержимое тега по условию. Подробнее:
На сайте есть фильтрация по цвету, но функционально заложено что значения цвета написаны прописью а не отображаются картинкой и изменить это нельзя. Возможно это можно исправить через JQ.
Есть такие значения в тегах

<label for="filterOne__0" class='colorValue'>Red</label>
<label for="filterOne__0" class='colorValue'>Blue</label>
<label for="filterOne__0" class='colorValue'>Green</label>

Хотелось бы получать значение в теги, например - Red, сравнивать его в каком-то условии, при совпадении с каким либо из значений возвращать на место один из тегов картинки, то есть получить вот такое

<label for="filterOne__0" class='colorValue'><img src='red.png'></label>
<label for="filterOne__0" class='colorValue'><img src='blue.png'></label>
<label for="filterOne__0" class='colorValue'><img src='green.png'></label>

Возможно ли такое реализовать подскажите пожалуйста?

рони · #2 (**permalink**) 17.04.2017, 09:49

Tipylja,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
  $(".colorValue").html(function(i,html){
       return $("<img/>",{src: html.toLowerCase()+".png"})
       });
});
  </script>
</head>

<body>

<label for="filterOne__0" class='colorValue'>Red</label>
<label for="filterOne__0" class='colorValue'>Blue</label>
<label for="filterOne__0" class='colorValue'>Green</label>


</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript