在 JavaScript 中切换我的 Div 的可见性

Question

我编写了一个按钮和一些我认为可以与该按钮一起使用的 JavaScript，但它目前无法正常工作。

我正在寻求一些帮助来纠正我的代码：

Button:
    <label class="switch">
      <input type="checkbox" class="whichStore"></input>
      <div class="slider round"></div>
    </label>

Divs that I want to swap the prices on when the button is clicked:
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
        <p>Item:</p>
      </div>
      <div class="col-lg-7 col-md-7 col-sm-6 col-xs-6">
        <p>Item Placeholder</p>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" class="priceA">
        <p><span class="money">$</span>9.99</p>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2" class="priceB" style="display: none">
        <p><span class="money">$</span>8.87</p>
      </div>
      <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2"></div>
    </div>

My script:
    <script>
            document.getElementsByClassName("whichStore").onchange = function() {
              var priceA = document.getElementsByClassName("salaryA");
              var priceB = document.getElementsByClassName("salaryB");
              if (priceA.style.display == "none") {
                document.getElementsByClassName("priceA").style.display = "";
                document.getElementsByClassNames("priceB").style.display = "none";
              } else if (priceB.style.display == "none") {
                document.getElementsByClassName("priceA").style.display = "none";
                document.getElementsByClassName("priceB").style.display = "";
              }
            }
    </script>

我的 div 在模态中，所以当我单击一个单词时，模态会弹出，其中包含表格。 表格的每一行都有一个项目类别，然后是项目名称，例如Toiletries: Toilet Paper，然后是任何商店的价格。因此，如果沃尔玛的价格是每卷 0.99 美元，而塔吉特的价格是 0.75 美元

显示模式时，它将以沃尔玛的价格开始（无论可能是什么），然后如果我单击按钮，它会将价格更改为 Target 的价格，隐藏沃尔玛的价格。然后，如果我再次单击该按钮，它会切换回沃尔玛的价格。

Answer 1

您可以为此使用 jQuery toggle() 方法。 将此添加到您的 html 的头部，以便能够在线使用 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

然后使用单独的脚本使按钮工作。 <div id="test">: 是这样的

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#test").toggle();
    });
});
</script>

下面有一个例子。

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle