Question

我有一个问题，希望有人可以帮助我。我需要根据另一个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”div的底部边框更改为特定颜色，具体取决于“music_carousel_item_hover”的值

对于此特定示例，文本为“Drum and Bass”，底部边框应为粉红色。如果文字说“House”，则底部边框应为蓝色。

Answer 1

使用$()找到music_carousel_item_hover元素。
使用each循环显示它们。
使用text检查其内容。
使用closest查找相关的music_carousel_item_description以查找相应的容器（我认为在您的情况下可能是li，无法确定） find找到music_carousel_item_description。
最后，在该元素上使用css设置其下边框。

粗略示例：Live copy

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

根据另一个div的文本内容更改div的底部边框

1 个答案: