按钮的操作取决于可见的部分。

Question

这里的初学者..。我通常试图在这里找到解决办法，但目前还没有找到解决办法。我有一个有多个部分的单页网站。我已经实现了一个开关可见函数，它在隐藏其他部分的同时显示一个单独的部分。现在每个部分都有一个我想要做动态的底部栏，但是，这个栏也有一个按钮。我想要一个按钮，它的onclick操作会根据可见的部分发生变化。那我该怎么做呢？

这是我的开关

function switchVisible() {
    if (document.getElementById('Div1')) {

        if (document.getElementById('Div1').style.display == 'none') {
            document.getElementById('Div1').style.display = 'block';
            document.getElementById('Div2').style.display = 'none';
        } else {
            document.getElementById('Div1').style.display = 'none';
            document.getElementById('Div2').style.display = 'block';
        }
    }
}

和底部的酒吧

<div class="row bottom-bar height-3 justify-content-between">
     <div class="col-4">
        <p>Meal Type: Keto</p>
     </div>
     <div class="col-4">
        <p>Starting From: 550 SAR</p>
     </div>
     <div id="orange-button" class="col-4 orange">
         <p>
           <input id="Button1" type="button" class="continue-btn" value="Continue" onclick="switchVisible2();" />
           </p>
      </div>
</div>

Answer 1

首先，使用元素的style.display == 'block'或'none'检测或切换元素的可见性不是一个好主意。因为其他按钮需要这些信息的确切原因，所以它们也应该检查不同元素的style.display，这是很麻烦的。更好的方法是使用一个更干净的css类:您可以很容易地添加、删除、初始化或检查元素上是否存在类。

​

var div1 = document.getElementById('Div1')
var div2 = document.getElementById('Div2')

function switchVisible() {
  if (div1.classList.contains("my-hidden")) {
    div1.classList.remove("my-hidden");
    div2.classList.add("my-hidden");
  } else {
    div1.classList.add("my-hidden");
    div2.classList.remove("my-hidden");
  }
}

function switchVisible2() {
  if (!div1.classList.contains("my-hidden")) {
    console.log("div1 action");
  }
  if (!div2.classList.contains("my-hidden")) {
    console.log("div2 action");
  }
}

.my-hidden {
  display: none;
}

<div id="Div1">Div1</div>
<div id="Div2" class="my-hidden">Div2</div>

<button onclick="switchVisible()">switchVisible</button>

<div class="row bottom-bar height-3 justify-content-between">
  <div class="col-4">
    <p>Meal Type: Keto</p>
  </div>
  <div class="col-4">
    <p>Starting From: 550 SAR</p>
  </div>
  <div id="orange-button" class="col-4 orange">
    <p>
      <input id="Button1" type="button" class="continue-btn" value="Continue" onclick="switchVisible2();" />
    </p>
  </div>
</div>

​