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美元

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

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

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

1 个答案: