如何使用Javascript隐藏按钮

Question

由于我最初的Javascript经验水平有限，我可以很好地掌握事件流。这是匆忙写的，可以进一步修改。

我正在创建卡片(bootstrap卡片)堆栈，只是简单的卡片，和加载按钮。为了避免任何依赖，我使用Javascript。

我不能理解事件流，或者我不能获得加载按钮隐藏。

​

window.onload = testCards;

function testCards() {
  var col_num = document.querySelector(".col-6");
  if (col_num < 10) {
    var loadBtn = document.querySelectorAll(".d-grid .gap-4");
    loadBtn.querySelector(".btn").classList.add("invisible");
  }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<h3>Footer card</h3>
<div class "row footer-card">
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
</div>

<div class="d-grid gap-4">
  <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

​

当卡片数量少于10张时，如何隐藏“加载更多”按钮。

Answer 1

代码有两个问题。第一个是获取.card div的计数，第二个是按钮的查询选择器。尝试执行以下操作，首先获取具有card类的所有元素，然后根据它们的长度隐藏load按钮。

​

window.onload = testCards;
function testCards() {
    var col_num =  document.getElementsByClassName("card");
    if(col_num.length < 10) {
        document.querySelector(".btn").style.display='none';
    }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Footer card</h3>
    <div class"row footer-card">
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    <div class="col-6 card"><p>This is card</p></div>
    </div>
    
    <div class="d-grid gap-4">
    <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
    </div>

​

Answer 2

我注释掉了我认为需要改变的东西。

​

// window.onload = testCards; It's better to use addEventListener

addEventListener('load', testCards);

function testCards() {
  // const col_num = document.querySelector(".col-6"); his returns an element, comparing it with a number is not valid
  // But what I think you mean is to find out how many .col-6 cards are out there...
  // If that's the case you use querySelectorAll and length
  const col_num = document.querySelectorAll(".col-6").length;
  const loadBtn = document.querySelectorAll(".d-grid.gap-4").querySelector(".btn");
  
  if (col_num > 10) { // changed that to > so if there are more than 10 cards, hide the button
    // When selecting classes of the same element, you select them just like you would in CSS with a period(.) and without spacing
    loadBtn.classList.add("invisible");
  } else {
    loadBtn.classList.remove('invisible');
  }
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" />
<h3>Footer card</h3>
<div class "row footer-card">
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
  <div class="col-6 card">
    <p>This is card</p>
  </div>
</div>

<div class="d-grid gap-4">
  <button class="btn btn-secondary py-1 my-3 mx-5" type="button">Load More</button>
</div>

​

Answer 3

问题是流没有进入if条件，因为您没有正确获取长度。试试这个，肯定能行得通。

window.onload = testCards;
function testCards(){
var col_num =  document.querySelectorAll(".col-6");

if(col_num.length < 10){
var loadBtn = document.querySelector(".d-grid");
        loadBtn.querySelector(".btn").style.display = 'none';
}
}