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です。

モーダルが表示されると、ウォルマートの価格で始まります。それをクリックすると価格が変わりますターゲットの価格に、ウォルマートを隠している。その後、もう一度ボタンをクリックすると、ウォルマートの価格に戻ります。

Answer 1

これには、jQuery toggle()メソッドを使用できます。

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

は、ボタンを機能させるために、別のスクリプトを使用します。 jQueryのオンラインを使用できるようにするために、あなたのhtmlの頭にこれを追加します。このようなもの<div id="test">:

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

以下の例があります。

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