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

coder 2025-01-11 原文

在对另一个输入字段进行更改后，我无法找出使用 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/

javascript 将 lt gt option jquery

有关javascript - 将属性应用于多个对象的更多相关文章

ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby-on-rails - Rails 3 中的多个路由文件 - 2
Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？最佳答案在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题
ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2
在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev
ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2
我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代
ruby-on-rails - Rails - 一个 View 中的多个模型 - 2
我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何
ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2
我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2
我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗？最佳答案您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话，Rails使用#method_missing作为属性setter，因此您的模块将优先，阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost)，那么您的实例方法需要进入一个特殊的模块:classBlah
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r

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

有关javascript - 将属性应用于多个对象的更多相关文章

随机推荐