不工作 jquery 通过下拉显示/隐藏

Question

当有许多具有相同类或 id 的下拉菜单时，jquery 无法通过下拉菜单显示/隐藏。 当更改下拉列表影响所有元素时。 请帮帮我

$(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();
            }
    });
});

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

jsfiddle demo

Answer 1

您需要使用 $(this) 、closest() 和 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