javascript - 将属性应用于多个对象

Question

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

---

目标

组织状态从“事件”切换为“暂停”。

对于每个事件 ID:

• 禁用事件状态下拉菜单。
• 如果事件状态为“已续订”，则保留为“已续订”。
• 如果事件状态为“事件”，请切换为“已暂停”。
• 如果事件状态为“已暂停”，则保留为“已暂停”。

组织状态从“暂停”切换为“事件”。

对于每个事件 ID:

• 启用事件状态下拉菜单。
• 保持状态不变。

---

这是代码(请忽略表格!):

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 新手，但要尽快掌握它 感谢您的帮助!

参见 fiddle : http://jsfiddle.net/riverecho/40087wdb/8/

Answer 1

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

但是，有两个原因会导致您的代码在用于多个广告系列时表现不佳:

1. 您为 #orgautorenewstatus 使用了 id 而不是类。
2. 每个事件都应位于 HTML 中自己的范围内。

要解决此问题，请将每个事件包装在单独的 div 元素中，并将 id 更改为类。然后遍历事件并将脚本应用于每个事件。

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

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