Как назначить разные атрибуты нескольким элементам одного класса на основе текстового значения с помощью JQuery - PullRequest
Новая
       21

Как назначить разные атрибуты нескольким элементам одного класса на основе текстового значения с помощью JQuery

0 голосов
/ 29 октября 2019

Так, например:

У меня есть несколько <span> элементов с классом .listing-text, которые говорят Available, некоторые, которые говорят Pending, и некоторые, которые говорят Sold.

Я бы хотел назначить фон green для тех, которые говорят Available, yellow - Pending и red - Sold.

У меня естьпопробовал несколько разных для петель и еще много чего. Все, что я смог сделать до сих пор, - это просто перевести все окна в зеленый цвет, и я предполагаю, что это потому, что я не выполняю итерацию должным образом. Единственное, что мне кажется правильным - это 

$('.listing-text').css('background-color','green');

. Он надежно меняет все фоны на зеленый.

Буду признателен за любую помощь.

Ответы [ 3 ]

1 голос
/ 29 октября 2019

Смотрите комментарии: 

// Get all the listings and loop over them
document.querySelectorAll(".listing-text").forEach(function(listing){
  // Check the text of the span for the possible choices and
  // apply the appropriate CSS class
  switch (listing.textContent) {
    case "Available":
      listing.classList.add("available");
      break;
    case "Pending":
      listing.classList.add("pending");
      break;
    case "Sold":
      listing.classList.add("sold");
      break;       
  }
});
.available { background-color:green; }
.pending { background-color:yellow; }
.sold { background-color:red; }
<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Available</span>
<span class="listing-text">Pending</span>
<span class="listing-text">Sold</span>
0 голосов
/ 29 октября 2019

Попробуйте следующее, используя функцию jQuery .each. 

$('.listing-text').each(function() {
    let listText = $(this).text()
    switch (listText) {
        case 'Pending':
            $(this).addClass('pending')
            break
        case 'Sold':
            $(this).addClass('sold')
            break
        case 'Available':
        default:
            $(this).addClass('available')
            break
    }
})
.available {  background-color: green  }
.pending {  background-color: yellow  }
.sold {  background-color: red  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="listing-text">Available</span>
<span class="listing-text">Sold</span>
<span class="listing-text">Pending</span>

То, что я здесь сделал, это зацикливание каждого элемента list-text, получение текста и применение класса на основе его текстового значения.

0 голосов
/ 29 октября 2019

Похоже, вы не можете написать селектор css, который соответствует тексту элемента (https://stackoverflow.com/a/1520469/8755370).

. Вместо этого вы можете перебрать весь список и добавить еще один класс для каждой категории. у всех будет .listing-text, но некоторые будут .listing-available или .listing-pending. Оттуда вы можете написать свои функции jquery, как те, которые вы опубликовали.

...