不工作jquery显示/隐藏下拉

Question

不工作jquery显示/隐藏下拉菜单时，有许多下拉与相同的类或id。 更改下拉列表影响所有元素。 请帮我

$(document).ready(function(){ 
 
    $(".gatewayname").hide(); 
 
    $(".bankname").show(); 
 
    $(".paytype").on("change", function() { 
 
\t \t 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> 
 
\t </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

你需要使用$（本），最接近（）和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

，或者您可以使用$（本）和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