Áp dụng thuộc tính cho nhiều đối tượng

Question

Tôi đang gặp khó khăn trong việc tìm ra cách tốt nhất để sử dụng jQuery để áp dụng thay đổi cho nhiều trường nhập sau khi thay đổi được thực hiện cho trường nhập khác. Mã bên dưới hoạt động nếu chỉ có 1 Id chiến dịch. Tuy nhiên, khi có nhiều chiến dịch có mặt, mã của tôi chỉ áp dụng trường hợp cuối cùng cho tất cả các chiến dịch. Tôi làm cách nào để thay đổi điều này để áp dụng cho từng Id chiến dịch riêng lẻ?

---

MỤC TIÊU

Tổ chức Tình trạng được chuyển từ 'Hoạt động' thành 'tạm dừng'.

Đối Mỗi id vận động:

• Status Disable vận động thả xuống.
• Nếu Trạng thái chiến dịch là 'Đã gia hạn', hãy để là 'Đã gia hạn'.
• Nếu Trạng thái chiến dịch là 'Hoạt động', hãy chuyển sang 'Tạm dừng'.
• Nếu Trạng thái chiến dịch bị 'Tạm dừng', hãy để ở trạng thái 'Tạm dừng'.

Trạng thái tổ chức được chuyển từ 'Tạm dừng' sang 'Hoạt động'.

Đối Mỗi id vận động:

• Enable Campaign Status thả xuống.
• Giữ nguyên trạng thái.

---

Đây là mã (xin vui lòng bỏ qua các bảng!):

var campaign_status = function() { 
 
    // If the Organization Status is set to 'Paused' and the Campaign is 'Active', make the campaign status 'Paused' and disable the drop down. 
 
    if ($('#orgautorenewstatus').val() == "Pause" && $('.autorenewstatus').val() == "Active") { 
 
     $('.autorenewstatus').prop('disabled', 'disabled'); 
 
     $('.autorenewstatus').val("Pause"); 
 
    } 
 
    // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', leave the Campaign Status and disable the drop down. 
 
    else if ($('#orgautorenewstatus').val() == 'Pause') { 
 
     $('.autorenewstatus').prop('disabled', 'disabled'); 
 
    } 
 
    else { 
 
     $('.autorenewstatus').prop('disabled', false); 
 
    } 
 
}; 
 
$(campaign_status); 
 
$("#orgautorenewstatus").change(campaign_status);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Organization Status</h3> 
 
<select id="orgautorenewstatus" name="orgautorenewstatus"> 
 
    <option value="Active" selected="selected">Active</option> 
 
    <option value="Pause">Paused</option> 
 
</select> 
 

 
<br /> 
 
<br /> 
 

 
<h4>Campaign Status</h4> 
 
<table> 
 
    <tbody> 
 
     
 
     <tr> 
 
      <td>#1</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_48622"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active" selected="selected">Active</option> 
 
        <option value="Renewed">Renewed</option></select> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>#2</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_48884"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active">Active</option> 
 
        <option value="Renewed" selected="selected">Renewed</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>#3</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_49000"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active" selected="selected">Active</option> 
 
        <option value="Renewed">Renewed</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     
 
    </tbody> 
 
</table>

Cần phải có một cách dễ dàng hơn và đơn giản hơn. Mới với jQuery, nhưng chọn nó càng nhanh càng tốt Cảm ơn sự giúp đỡ của bạn!

Xem Fiddle: http://jsfiddle.net/riverecho/40087wdb/8/

Answer 1

Thứ nhất, bộ nhớ cache đối tượng jQuery của bạn. Bạn không cần phải tạo một đối tượng jQuery mới mỗi lần bạn cần giao diện với một phần tử.

Tuy nhiên, có hai lý do tại sao mã của bạn cư xử tồi tệ khi được sử dụng với nhiều chiến dịch:

1. Bạn đã sử dụng một id thay vì một lớp học cho #orgautorenewstatus.
2. Mỗi chiến dịch phải nằm trong phạm vi riêng của nó trong HTML.

Để khắc phục sự cố này, hãy quấn từng chiến dịch trong một phần tử riêng biệt div và thay đổi id thành các lớp. Sau đó, lặp qua các chiến dịch và áp dụng tập lệnh cho từng chiến dịch.

Đảm bảo rằng khi bạn đang chọn các yếu tố mà bạn chỉ tham chiếu các yếu tố có trong chiến dịch mà tập lệnh hiện đang hoạt động.

$('.campaign').each(function(){ 
 
    var oars = $('.orgautorenewstatus', this); 
 
    var ars = $('.autorenewstatus', this); 
 
    var campaign_status = function() { 
 
     ars.prop('disabled', oars.val() === "Pause"); 
 
     if (oars.val() === "Pause") ars.each(function(){ 
 
      if(this.value === "Active") this.value = 'Pause'; 
 
     }); 
 
    }; 
 
    campaign_status(); 
 
    oars.change(campaign_status); 
 
});

/* For cosmetic purposes only */ 
 
.campaign { display: inline-block; width: 33%; } * { margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- The HTML has been minified to save space --> 
 
<div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div>

Answer 2

Đối với một nhiều chiến dịch, đây sẽ là mất của tôi trên đó. Quấn tất cả chiến dịch của bạn trong div riêng của mình như thế này

<div class="campaignStatus">...</div>

Gán một lớp học để hộp thả xuống (kể từ id s là phải là duy nhất)

<select id="orgautorenewstatus" name="orgautorenewstatus" class="campaignBox">...</select>

VERSION 2 (được cải thiện: xem updated fiddle)

Chỉ ảnh hưởng đến các mục đó trong một chiến dịch nhất định v (thay vì lặp qua tất cả các chiến dịch)

$(".campaignBox").on('change', function() { 
     // If the Organization Status is set to 'Paused' and the Campaign is 'Active', 
     // make the campaign status 'Paused' and disable the drop down. 
     if ($(this).val() === "Pause") { 

      //for each autorenew status within the campaign 
      $(this).closest('.campaignStatus').find('.autorenewstatus').each(function (i, box) { 
       if ($(box).val() == "Active") { 
        $(box).val("Pause"); 
       } 
      }); 
      $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', 'disabled'); 
     } else { 
      // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', 
      // leave the Campaign Status and disable the drop down. 
      $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', false); 
     } 
    }); 

Answer 3

Tôi có đơn giản hóa logic của bạn một chút, đây là mẫu làm việc của tôi

var campaign_status = function() { 
     var newStatus = $('#orgautorenewstatus').val() == "Pause"? 'disabled' : false; 
     $('.autorenewstatus').each(function(){ 
     if($(this).val() == "Active") {   
      $('.autorenewstatus').prop('disabled', newStatus); 
      $('.autorenewstatus').val("Pause"); 
     } else { 
      $('.autorenewstatus').prop('disabled', newStatus); 
     } 
     }); 

    }; 
    $(campaign_status); 
    $("#orgautorenewstatus").change(campaign_status); 

http://jsfiddle.net/wx5ksfkk/1/