javascript - 如何保留两张卡片并使用显示更多按钮隐藏一张卡片？

Question

如您所见，我有三张卡片，还可以有更多张。如何默认隐藏某些卡片并通过单击“查看更多”按钮显示它们？例如，在这种情况下，我想隐藏最后一张卡片并通过单击“查看更多”来显示它。

有人可以帮忙吗？这将不胜感激

问候，账单

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}

.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

Answer 1

你可以像这样很简单地做到这一点:

$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");

  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }

  $(document).on("click", ".showMore", function() {
    hidEle.first().show();
    hidEle = $(".card-border:not(:visible)");
    if (hidEle.length == 0) {
      $(".showMore").hide();
    }
  });
});

我在您的 CSS 中添加了:

.card-border:not(:nth-child(-n+3)) { // this show the first 2 elements
  display: none;
}

如果有任何隐藏的 .card-border，这将允许您自动显示一个 showMore 按钮

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});

$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");

  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }

  $(document).on("click", ".showMore", function() {
    hidEle.first().show();
    hidEle = $(".card-border:not(:visible)");
    if (hidEle.length == 0) {
      $(".showMore").hide();
    }
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}

.card-border:not(:nth-child(-n+3)) {
  display: none;
}

.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

点击显示全部

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});

$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");

  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }

  $(document).on("click", ".showMore", function() {
    hidEle.show();
    $(".showMore").hide();
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}

.card-border:not(:nth-child(-n+3)) {
  display: none;
}

.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>

少看按钮

$(".card-border").on("click", function() {
  // Toggle the div background color
  $(this).toggleClass("card-bg");
  // Find the button
  var btn = $(this).find(".btn");
  // Toggle classes for ONE button
  btn.toggleClass('btn-add-item btn-rmv-item');
  // Depending on a button's class, change it's text
  (btn.hasClass("btn-rmv-item")) ? btn.text("Remove"): btn.text("Add this extra");
});

$(document).ready(function() {
  var visEle = $(".card-border:visible");
  var hidEle = $(".card-border:not(:visible)");

  if (hidEle.length > 0) {
    $('.card-border:last').after('<button class="showMore">Show more</button>')
  }

  $(document).on("click", ".showMore", function() {
    hidEle.show();
    $(".showMore").hide();
    $('.card-border:last').after('<button class="showLess">Show less</button>')
  });
  
  $(document).on("click", ".showLess", function() {
    $(".card-border").not(visEle).hide();
    $(this).remove();
    $(".showMore").show();
  });
});

.card-border {
  border: 1px solid #c7c7c7;
  border-radius: .25rem;
  padding: 15px 18px 10px 18px;
  margin-bottom: 30px;
  cursor: pointer;
}

.card-border:not(:nth-child(-n+3)) {
  display: none;
}

.card-bg {
  background-color: rgba(89, 211, 137, .08);
  border: 1px solid #59d389;
}

.upsell-pricing {
  float: right;
  font-size: 18px;
  font-weight: 600;
}

.upsell-text {
  font-size: 15px;
  margin-top: 10px;
  color: #333333;
}

div.ho-border:hover {
  border: 1px solid #59d389;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Fuel Replacement -->
<div class="card-border ho-border">
  <h4 class="float-left">Fuel replacement</h4>
  <div class="upsell-pricing">£49/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Save time and return the vehicle at any fuel level. The price include upto a full tank of petrol/gas.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Portable WiFi Hotspot -->
<div class="card-border ho-border">
  <h4 class="float-left">Portable WiFi hotspot</h4>
  <div class="upsell-pricing">£10/day</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Get the luxury of portable WiFi hotspot on the go. The price include unlimited data usage for the day.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>
<!-- Post-trip Cleaning -->
<div class="card-border ho-border">
  <h4 class="float-left">Post-trip cleaning</h4>
  <div class="upsell-pricing">£30/trip</div>
  <div class="clearfix"></div>
  <div class="upsell-text">Return the vehicle without bothering about post-trip cleaning. This extra does not cover damages to the vehicle seat, stains, spills, and smoke burns.</div>
  <div class="mt-3 float-right">
    <button type="button" class="btn btn-add-item">Add this extra</button>
  </div>
  <div class="clearfix"></div>
</div>