Question

我的代码隐藏了所有按钮。我不知道如何正确编写此代码，以在每个下一个条件if (text <= 16)

下隐藏或保留可见按钮

$(".card").each(function(i, e) {
  var text = $(e).text().length;
  if (text <= 16) {
    console.log(text);
    $(".btn").each(function(i, e) {
      $(this).hide()
    });
  }
});


 UPD HTML

    <div class="container">
  {% for image, title, text in imageTitles %}
  <hr>
  <h3>
        <p class="text-center ">{{ title }}</p>
  </h3>
  <img class="col-12 ml-auto col-12 mr-auto" src={{ image }}>
  <div class="span4 collapse-group">
    <div class="text-center">
      <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check &raquo;</a></p>
    </div>
    <div class="collapse">
      <div class="card card-body">
        {{text}}
      </div>
    </div>
    </div>
    {% endfor %}
    <script>
    $(".card").each(function(i,e){
    var text = $(e).text().length;
      if (text <=16) {
        console.log(text);
        $(".btn").each(function(i,e){
          $(this).hide()
        });
      }
    });
    </script>

Answer 1

要在.btn中的至少一个小于16个长度时隐藏所有.card：

$(".card").each(function(){
    $(".btn").toggle($(this).text().length > 16);
});

要将所有.btn隐藏在内部 .card：

$(".card").each(function(){
    $(".btn", this).toggle($(this).text().length > 16);
});

已解决的问题：选择.card，找到卡片和按钮的共同父对象，选择按钮，将其隐藏。

$(".card").each(function(){
    $(this)
        .closest('.collapse-group')
        .find('.btn')
        .toggle($(this).text().length > 16);
});

Answer 2

我可以在您的代码中看到序列问题。请尝试

$(".card").each(function(i,e){
    var text = $(e).text().length;

        console.log(text);
        $(".btn").each(function(i,e){

                       if (text <=16) {
                                        $(this).hide();
                                      }
        });

    });

Answer 3

您应该使用DOM关系来定位相关元素。您可以使用.filter()获得所需的文本长度的卡片，然后使用.closest()遍历共同祖先。然后使用.find()定位按钮

//Start with displaying all buttons
$(".btn").show();

//Filter cards having text < 16
var cards = $(".card").filter(function (i, e) {
    return $(this).text().trim().length <= 16;
});

//Target related buttons and hide them
cards.closest('.collapse-group').find(".btn").hide();

//Start with displaying all buttons
$(".btn").show();

//Filter cards having text < 16
var cards = $(".card").filter(function(i, e) {
  return $(this).text().trim().length <= 16;
});

//Target related buttons and hide them
cards.closest('.collapse-group').find(".btn").hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span4 collapse-group">
  <div class="text-center">
    <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check</a></p>
  </div>
  <div class="collapse">
    <div class="card card-body">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </div>
</div>
<div class="span4 collapse-group">
  <div class="text-center">
    <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check</a></p>
  </div>
  <div class="collapse">
    <div class="card card-body">
      Lorem Ipsum
    </div>
  </div>
</div>
<div class="span4 collapse-group">
  <div class="text-center">
    <p><a class="btn btn-md btn-outline-dark btn-square" href="#">Check</a></p>
  </div>
  <div class="collapse">
    <div class="card card-body">
      Lore
    </div>
  </div>
</div>

如果条件为true / false，则隐藏/保留每个元素可见

3 个答案: