자바 스크립트에서 내 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> 

나는 내가 모달가있는 테이블 팝업 단어를 클릭하면 모달 내 사업부가 있습니다. 테이블의 각 행에는 항목 범주가 있고 항목 이름은 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