将属性应用于多个对象

Question

我在使用jQuery将更改应用于其他输入字段后，无法确定最佳方法。如果只有一个Campaign id，则下面的代码有效。但是，当存在多个Campaign时，我的代码仅将最后一个实例应用于所有Campaign。如何更改此代码以逐个应用于每个Campaign id？

目标：

组织状态从“活动”切换到“暂停”。

对于每个Campaign id：

- 禁用Campaign状态下拉菜单。 - 如果Campaign状态为“已更新”，则保持不变。 - 如果Campaign状态为“活动”，则切换到“暂停”。 - 如果Campaign状态为“暂停”，则保持不变。

组织状态从“暂停”切换到“活动”。

对于每个Campaign id：

- 启用Campaign状态下拉菜单。 - 保持状态不变。

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

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>

一定有更简单和直接的方法。虽然我是jQuery新手，但我正在尽快学习。感谢您的帮助！

请查看代码演示： http://jsfiddle.net/riverecho/40087wdb/8/

- riverecho

---

那么你的问题是什么？具体点？ - Adam Buchanan Smith

以上代码仅适用于存在一个广告系列 ID 的情况下。但是，当存在多个广告系列时，上述代码只是将最后一个实例应用于所有广告系列。我该如何更改代码以针对每个广告系列 ID 分别运行？我也会更新初始帖子。 - riverecho

你可以使用 .each()。 - dippas

你能否澄清一下所有其他的广告活动是否都属于同一个ID？或者检查我的回答看看我是否正确？ - blurfus

Answer 1

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

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

1.您已经使用了id而不是class来代替#orgautorenewstatus。 2.每个广告系列应该在HTML中拥有自己的范围。

要解决此问题，请将每个广告系列包装在单独的

元素中，并将id更改为class。然后对广告系列进行迭代并向每个广告系列应用脚本。

确保在选择元素时，您只引用当前操作所在的广告系列中包含的元素。

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

- user4639281

Answer 2

对于多个广告系列，这是我的建议。 将所有的广告系列都包装在自己的 div 中，像这样：

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

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

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

版本 2（改进版：请参见更新后的 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);
      }
  });

- blurfus

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/

- Andika Tanuwijaya

---

我认为这不适用于多个广告系列，而这恰恰是 OP 所询问的。 - blurfus

我会让OP澄清，但我认为每个活动都有自己的id下拉菜单（即自己的“#orgautorenewstatus”）。 - blurfus