Question

我在找到对另一个输入字段进行更改后使用jQuery将更改应用于多个输入字段的最佳方法时遇到了问题。如果只有1个广告系列ID，则以下代码有效。但是，当存在多个广告系列时，我的代码只会将最后一个实例应用于所有广告系列。 如何更改此设置以分别应用于每个广告系列ID？

目标

组织状态从＆＃39;有效＆＃39;暂停＆＃39;

对于每个广告系列ID：

停用广告系列状态下拉列表。
如果广告系列状态为＆＃39;续订＆＃39;，请保留为＆＃39;续订＆＃39;。
如果广告系列状态为“有效”，请切换为“暂停”。
如果广告系列状态已暂停＆＃39;，请保持＆＃39;已暂停＆＃39;。

组织状态从暂停＆＃39;切换到＆＃39;活跃＆＃39;

对于每个广告系列ID：

启用广告系列状态下拉列表。
保持状态不变。

这是代码（请忽略表格！）：

＆＃13;

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

＆＃13;

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

＆＃13;

必须有一种更简单，更直接的方式。 jQuery的新手，但尽可能快地提取它感谢您的帮助！

见小提琴： http://jsfiddle.net/riverecho/40087wdb/8/

Answer 1

首先，缓存你的jQuery对象。每次需要与元素交互时，您都不需要创建新的jQuery对象。

但是，当您的代码与多个广告系列一起使用时，有两个原因导致您的代码表现不佳：

您已为#orgautorenewstatus使用了ID而不是类。
每个广告系列都应位于HTML中自己的范围内。

要解决此问题，请将每个广告系列打包在单独的div元素中，然后将ID更改为类。然后遍历广告系列并将脚本应用于每个广告系列。

确保在选择仅引用脚本当前正在运行的广告系列中包含的元素的元素时。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于多个广告系列，这是我的看法。像这样

将所有广告系列包装在自己的div中

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

将一个类分配给下拉框（因为id是唯一的）

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

版本2 （改进：见updated fiddle）

仅影响给定广告系列div中的那些项目（而不是遍历所有广告系列）

  $(".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

我已经简化了你的逻辑，这是我的工作样本

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/

将属性应用于多个对象

3 个答案: