jquery - json onselect 显示/隐藏多 id div 元素

Question

我有一张这样的桌子

id - type   - contact          - function
---------------------------------------------------
10 - phone  - 123/456789       - edit(button)
21 - mail   - info@example.com - edit(button)
58 - phone  - 456/789000       - edit(button)

在 EDIT 按钮上单击启动具有这样代码的模态框架

<div class="col-lg-6">
 <label>type</label>
 <select name="contact_type" class="form-control" id="tipo_contatto_<?php echo $id; ?>">
  <option value="phone">phone</option>
  <option value="Mail">Mail</option>
 </select>
</div>

<div class="col-lg-6" id="contatto_<?php echo $id; ?>">
 <label>Contact</label>
 <input type="text" class="form-control" name="contact" value="">
</div>

<div class="col-lg-2" id="prefisso_<?php echo $id; ?>">
 <label>Prefix</label>
 <input type="text" class="form-control" name="prefix" value="">
</div>

<div class="col-lg-4" id="numero_<?php echo $id; ?>">
 <label>Number</label>
 <input type="text" class="form-control" name="number" value="">
</div>

然后我想在电话上选择显示带有前缀和号码的 div，而不是联系...

此解决方案适用于 1 个 id，但适用于动态多 id？

$('#contact').hide();
$('#contact_type').change(function(){
 if ( $('#contact_type').val() == 'Phone') {
   $('#number').show(); 
   $('#prefix').show(); 
   $('#contact').hide(); 
 } else {
   $('#number').hide(); 
   $('#prefix').hide(); 
   $('#contact').show();               
 } 
});

Answer 1

您可以考虑使用 jQuery 来选择基于其他属性的元素，而不是使用id如下所示的属性：

// Whenever a contact type element is changed
$('[name="contact_type"]').change(function(){
   // Get the ID value for this row (appended to each element) by removing
   // all non-digits from the ID
   var id = $(this).attr('id').replace(/\D/g, '');
   // If it is phone, do something
   if ($(this).val() == 'phone') {
        $('#numero_' + id).show(); 
        $('#prefisso_' + id).show(); 
        $('#contatto_' + id).hide(); 
   } else {
        $('#numero_' + id).hide(); 
        $('#prefisso_' + id).hide(); 
        $('#contatto_' + id).show();               
   } 
});

例子

您可以在此处看到一个工作示例，并在下面演示：