1

同じクラスまたは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 デモ

4

1 に答える 1

2

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

更新されたデモ

または、 $(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();
            }
    });
});

デモ

于 2015-11-08T14:43:33.567 に答える