动态jQuery事件处理程序

Question

我一直在尝试创建一个动态的jQuery代码，以便在drupal中使用list下拉列表来处理.change事件。在div id中硬编码时，我让它正常工作，如下所示：

jQuery(document).ready(function($) {
    $("#edit-submitted-row-1-program").change(function() {
        if($(this).val() === 'DreamSpark Standard'){
            $("label[for='edit-submitted-row-1-extended-department-name'").html('Campus Name');
            console.log('Yes it is supposed to change!');
        } else {
            $("label[for='edit-submitted-row-1-extended-department-name'").html('Extended department name');
        }
        console.log($(this).val());
        }).change();
    }
});

如果选择了“DreamSpark标准”，这应该会更改一个输入字段上面的标签(如下面所示)。

然而，我想做的是这样的事情：

​

​

您可以在其中添加所需的行，事件处理程序将更改适当的标签的标签。

我已经尝试过以下代码，但这肯定是错误的，因为我只是在执行for()循环，而我知道我应该执行foreach()或类似的操作。

jQuery(document).ready(function($) {
    for ( var i = 0; i < 5; i++) {
        $("#edit-submitted-row-" + i + "-program").change(function() {
            var j = i;
            if($(this).val() === 'DreamSpark Standard'){
                $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Campus Name');
                console.log('Yes it is supposed to change!');
            } else {
                $("label[for='edit-submitted-row-" + j + "-extended-department-name'").html('Extended department name');
            }
            console.log($(this).val());
        }).change();
    }
});

下面是重要的HTML代码片段：

<div id="webform-component-row-1" class="webform-layout-box horiz">
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id">
        <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label>
        <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" />
    </div>
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program">
        <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label>
        <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select>
    </div>
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name">
        <label for="edit-submitted-row-1-extended-department-name">Extended department name </label>
        <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" />
    </div>
</div>

(每一行将增加1，因此下一行将是'webform-component- row -2‘等等)

请记住，我不能通过在标记中添加标记或额外的东西，我只需要处理给定的类和ID的输出！

谢谢你们！

Answer 1

没有必要使用循环，您可以使用类选择器编写通用代码。

<div id="webform-component-row-1" class="webform-layout-box horiz">
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--subscription-id">
        <label for="edit-submitted-row-1-subscription-id">Subscription ID <span class="form-required" title="This field is required.">*</span></label>
        <input type="text" id="edit-submitted-row-1-subscription-id" name="submitted[row_1][subscription_id]" value="" size="18" maxlength="128" class="form-text required" />
    </div>
    <div class="form-item webform-component webform-component-select" id="webform-component-row-1--program">
        <label for="edit-submitted-row-1-program">Program <span class="form-required" title="This field is required.">*</span></label>
        <select id="edit-submitted-row-1-program" name="submitted[row_1][program]" class="form-select required"><option value="" selected="selected">- Select -</option><option value="DreamSpark Premium">DreamSpark Premium</option><option value="DreamSpark Standard">DreamSpark Standard</option><option value="Other">Other</option></select>
    </div>
    <div class="form-item webform-component webform-component-textfield" id="webform-component-row-1--extended-department-name">
        <label for="edit-submitted-row-1-extended-department-name" class="edit-submitted-row-extended-department-name">Extended department name </label>
        <input type="text" id="edit-submitted-row-1-extended-department-name" name="submitted[row_1][extended_department_name]" value="" size="26" maxlength="128" class="form-text" />
    </div>
</div>

然后

jQuery(function ($) {
    $(".webform-layout-box select").change(function () {
        var $lbl = $(this).closest('.webform-layout-box').find('.edit-submitted-row-extended-department-name');
        if ($(this).val() === 'DreamSpark Standard') {
            $lbl.html('Campus Name');
        } else {
            $lbl.html('Extended department name');
        }
    }).change();
});

演示：小提琴

• 添加了一个名为edit-submitted-row-extended-department-name的新类
• 我们将更改事件定向到select元素中的.webform-layout-box元素
• 当它被更改时，在同一个.webform-layout-box中找到.webform-layout-box元素并更改它的文本

Answer 2

你真该抬头看看

$.on and $.live 

因为它们允许您为还不存在的元素绑定事件。然后，您可以继续处理元素。