Question

我在html中有多个div，例如：

<div class="litter"> 
    <div class="litter-1">
        <div class="status">Available</div> 
        <div class="available"><img /></div>
    </div>
    <div class="litter-2">
        <div class="status">Available</div> 
        <div class="available"><img /></div>
    </div>
</div>

状态文本将根据用户输入而有所不同。如果状态为可用，则不应显示可用的类。但是，如果状态不可用，则应该。图像始终显示，但仅在状态更改时显示。

我可以使jQuery隐藏所有图像或全部显示，但不基于状态的html值。

jQuery

if($('.litter > .status').html()==="Available") {
    $(this).next('.available').hide();
    } else {
    $('.available').show();
}

有帮助吗？

Answer 1

您可以使用jQuery .each()使用循环：

// change selector to '.litter .status'
$('.litter .status').each(function() {
    // loop through each .status element 

    // get partner img container .available
    var imgContainer = $(this).parent().find('.available');

    if ($(this).text() === "Available")
    {
        imgContainer.hide();
    }
    else 
    {
        imgContainer.show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="litter"> 
    <div class="litter-1">
        <div class="status">Available</div> 
        <div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder1" /></div>
    </div>
    <div class="litter-2">
        <div class="status">Other status</div> 
        <div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder2" /></div>
    </div>
</div>

Answer 2

您可以切换单个类status-available，并将其与adjacent sibling combinator组合以控制图像的显示。

<!-- Image will show -->
<div class="status status-available">…</div>

vs。

<!-- Image will not show -->
<div class="status">…</div>

示例

/* Image is hidden by default */
.available > img {
  display: none;
}

 /* Adjacent sibling combinator in action */
.status-available + .available > img {
  display: block;
}

<div class="litter">
  <div class="litter-1">
    <div class="status status-available">Available</div>
    <div class="available">
      <img src="http://placekitten.com/150/150" alt="Cute cat" />
    </div>
  </div>
  <div class="litter-2">
    <div class="status">Available</div>
    <div class="available">
      <img src="http://placekitten.com/150/150" alt="Cute cat" />
    </div>
  </div>
</div>

Answer 3

好，所以Haldo使我走上了正确的轨道，但为了使它们与弦一起出现。我不得不使用if ($(this).text() === ("Available")

来代替if ($(this).text().indexOf('Needs a Forever Home') > -1)

其余代码与Haldo相同。

如何在另一个div jQuery中显示基于内容的div

3 个答案: