在对另一个输入字段进行更改后，我无法找出使用 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/
最佳答案
首先，缓存您的 jQuery 对象。您无需在每次需要与元素交互时都创建新的 jQuery 对象。
但是，有两个原因会导致您的代码在用于多个广告系列时表现不佳:
- 您为
#orgautorenewstatus使用了 id 而不是类。 - 每个事件都应位于 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>关于javascript - 将属性应用于多个对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33292023/