Question

当有许多具有相同类或ID的下拉列表时，不按下拉列表显示/隐藏jquery show / hide。当更改下拉列表影响所有元素时。请帮帮我

＆＃13;

$(document).ready(function(){
     $(".gatewayname").hide();
     $(".bankname").show();
    $(".paytype").on("change", function() { 
		var val = $(this).val();
           if (val === "bank"){
                $(".gatewayname").hide();
                $(".bankname").show();
            }else{
                $(".gatewayname").show();
                $(".bankname").hide();
            }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
    <td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select>
        <br><br>
        <select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br>
        <input type="text" name="bankname" class="bankname"></td>
	</tr>
 <tr>
    <td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select>
        <br><br>
        <select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br>
        <input type="text" name="bankname" class="bankname"></td>
</tr>
            
            
<tr>
<td><select name="paytype" class="paytype"><option value="bank">Bank</option><option value="online">Online</option></select>
<br><br>
<select class="gatewayname"><option value="paypal">Paypal</option>option value="Card"></option>Card</select><br>
<input type="text" name="bankname" class="bankname"></td>
</tr>
</table>

＆＃13;

jsfiddle demo

Answer 1

您需要使用 $（this），最近（）和 find（）

$(document).ready(function(){
     $(".gatewayname").hide();
     $(".bankname").show();
    $(".paytype").on("change", function() { 
        var val = $(this).val();
           if (val === "bank"){
                $(this).closest('td').find(".gatewayname").hide();
                $(this).closest('td').find(".bankname").show();
            }else{
                $(this).closest('td').find(".gatewayname").show();
                $(this).closest('td').find(".bankname").hide();
            }
    });
});

<强> Updated Demo

或者你可以使用 $（this）和 nextAll（）

$(document).ready(function(){
     $(".gatewayname").hide();
     $(".bankname").show();
    $(".paytype").on("change", function() { 
        var val = $(this).val();
           if (val === "bank"){
                $(this).nextAll(".gatewayname").hide();
                $(this).nextAll(".bankname").show();
            }else{
                $(this).nextAll(".gatewayname").show();
                $(this).nextAll(".bankname").hide();
            }
    });
});

DEMO

不工作jquery显示/隐藏下拉列表

1 个答案: