Question

我只想在右侧输入字段中隐藏并显示带有jQuery点击的.container。

如何只显示第一个和第二个容器。如果我点击评级2星级以上，价格2.50和交付费用4.00 $？

第一个和第二个容器应该只是可见的。但如果我点击＆＃34; 4星等等＆＃34;应该出现第二个容器。

如果我再次点击＆＃34; 3星级以上＆＃34;一切都应该消失。如果我点击附件价格3.45 $和Dalivery收费5.00 $最后一个容器应该是可见的。

我的代码示例

＆＃13;

<body>
<div id="navigation">
    <div class="box">
     <p>Rating</p>
        <label for="rat0"><input type="radio" name="rating" id="ra0t" value="1"> 1 Star</label>
        <label for="rat1"><input type="radio" name="rating" id="rat1" value="2"> 2 Stars and more</label>
        <label for="rat2"><input type="radio" name="rating" id="rat2" value="3"> 3 Stars and more</label>
        <label for="rat3"><input type="radio" name="rating" id="rat3" value="4"> 4 Stars and more</label>
        <label for="rat4"><input type="radio" name="rating" id="rat4" value="5"> 5 Stars and more</label>
    </div>
    <div class="box">
     <p>Price</p>
        <label for="prc0"><input type="radio" name="price" id="prc0" value="0"> No matter</label>
        <label for="prc1"><input type="radio" name="price" id="prc1" value="1.00"> 1.00$</label>
        <label for="prc2"><input type="radio" name="price" id="prc2" value="2.50"> 2.50$</label>
        <label for="prc3"><input type="radio" name="price" id="prc3" value="3.00"> 3.00$</label>
        <label for="prc4"><input type="radio" name="price" id="prc4" value="3.45"> 3.45$</label>
    </div>
    <div class="box">
        <p>Delivery charges</p>
        <label for="del0"><input type="radio" name="delcha" id="del0" value="1"> 1.00$</label>
        <label for="del1"><input type="radio" name="delcha" id="del1" value="2"> 2.00$</label>
        <label for="del2"><input type="radio" name="delcha" id="del2" value="3"> 3.00$</label>
        <label for="del3"><input type="radio" name="delcha" id="del3" value="4"> 4.00$</label>
        <label for="del4"><input type="radio" name="delcha" id="del4" value="5"> 5.00$</label>
    </div>
</div>
<div id="content">
    <div class="container" data-rating="4" data-price="2.50" data-delcha="4.00">
     <p>First container</p>
    </div>
    <div class="container" data-rating="2" data-price="2.50" data-delcha="4.00">
     <p>Second container</p>
    </div>
    <div class="container" data-rating="3" data-price="3.45" data-delcha="5.00">
     <p>Last container</p>
    </div>
</div>
<script>
$(window).load(function () {
      $("#navigation > .box > label > input").click(function () {
                
          var get_value = $(this).val(); // Get a value from input field
        
          if (get_value !== "") {
           // ??
          }
        
          if (get_value == "0") {
            $("#content > .container").show();
            }
           });
)};
 </script>

</body>

＆＃13;

jQuery隐藏和显示容器，点击不同的值

0 个答案: