Изменить нижнюю границу div на основе текстового содержимого другого div

0

У меня проблема, я надеюсь, что кто-то может мне помочь. Мне нужно изменить нижнюю границу div на основе текста, содержащегося в другом div.

<ul id="featured_music">
<li style="width: 250px;">
    <div class="music_carousel_item_wrapper"> 
  <div class="music_carousel_item_content">
      <div class="music_carousel_item_image">
                    <div class="field field-name-field-live-show-preview field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://xxxxx.com/"><img typeof="foaf:Image" src="http://xxxxx.com/showpreviewtest4.png" width="250" height="187" alt=""></a></div></div></div>       </div>
    </div>
  <div class="music_carousel_item_hover" style="opacity: 0;">

                         <p>Drum and Bass</p> 
        <p><a href="http://xxxxx.com/showpreviewtest4.png" rel="lightbox" title="04.02.2014 - Transcendent Tuesdays"><i class="general foundicon-search"></i></a><a href="/show/drum-and-bass/04022014-transcendent-tuesdays"> <i class="general foundicon-paper-clip"></i></a></p>
                </div> 
</div>  
<div class="music_carousel_item_description">
<h3><a href="/show/drum-and-bass/04022014-transcendent-tuesdays">04.02.2014 - Transcendent Tuesdays</a></h3>
</div>  
</li>

Эта надбавка - это карусель предметов, для удобства я включил только один предмет. Для этого кода я хочу изменить нижнюю границу раздела "music_carousel_item_description" на определенный цвет в зависимости от значения "music_carousel_item_hover",

В этом конкретном примере текст "Барабан и бас", а нижняя граница должна быть розовой. Если в тексте указано "Дом", нижняя граница должна быть синей.

Теги:

1 ответ

1
Лучший ответ

  1. Найдите элементы music_carousel_item_hover используя $().

  2. Проходите через них с each.

  3. Проверьте их содержимое, используя text.

  4. Найдите связанный music_carousel_item_description, используя closest чтобы найти соответствующий контейнер (я думаю, это может быть li в вашем случае, не могу точно сказать), затем find чтобы найти music_carousel_item_description.

  5. Наконец, используйте css для этого элемента, чтобы установить его нижнюю границу.

Пример: Живая копия

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="featured_music">
<li style="width: 250px;">
    <div class="music_carousel_item_wrapper"> 
  <div class="music_carousel_item_content">
      <div class="music_carousel_item_image">
                    <div class="field field-name-field-live-show-preview field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://xxxxx.com/"><img typeof="foaf:Image" src="http://xxxxx.com/showpreviewtest4.png" width="250" height="187" alt=""></a></div></div></div>       </div>
    </div>
  <div class="music_carousel_item_hover">

                         <p>Drum and Bass</p> 
        <p><a href="http://xxxxx.com/showpreviewtest4.png" rel="lightbox" title="04.02.2014 - Transcendent Tuesdays"><i class="general foundicon-search"></i></a><a href="/show/drum-and-bass/04022014-transcendent-tuesdays"> <i class="general foundicon-paper-clip"></i></a></p>
                </div> 
</div>  
<div class="music_carousel_item_description">
<h3><a href="/show/drum-and-bass/04022014-transcendent-tuesdays">04.02.2014 - Transcendent Tuesdays</a></h3>
</div>  
</li>
  </ul>
  <script>
    (function() {
      "use strict";

      // 1.Find the music_carousel_item_hover elements using $().
      // 2. Loop through them with each.
      $(".music_carousel_item_hover").each(function() {
        // Each DOM element in the loop is 'this', to get
        // a jQuery wrapper we use '$()' again
        // 3. Check their content by using text.
        var $el = $(this);
        var color;
        var content = $el.text().toLowerCase();
        if (content.indexOf("drum and bass") !== -1) {
          color = "blue";
        }
        else if (content.indexOf("house") !== -1) {
          color = "pink";
        }

        if (color) {
          // 4. Find the related music_carousel_item_description
          // by using closest to find the appropriate container
          // (I think it might be an li in your case, can't tell
          // for sure) then find to find the
          // music_carousel_item_description.
          // 5. Finally, use css on that element to set its bottom border.
          $el.closest('li')
            .find('.music_carousel_item_hover')
            .css("border-bottom", "1px solid " + color);
        }
      });
    })();
  </script>
</body>
</html>
Поделиться
  • 0
    Могу ли я побеспокоить вас за быстрый пример кода, который я могу попробовать. Я еще не очень хорошо разбираюсь в JS или jQuery :(
  • 0
    Я могу отправить ссылку на страницу, если это поможет. Большое спасибо за вашу помощь!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню