Question

我正在尝试更改一个表单字段的状态，“idSerialNo”基于对另一个表单字段的更改，“idVerification”，但我无法访问正确的元素，因为页面上有三个表单。 / p>

每个的相关部分如下所示：

// Input 1, a select element
<div id="sigIDVerification_field" class="clearfix  ">
    <label for="sigIDVerification"> … </label>
    <div class="input">
        <select id="sigIDVerification" class="span5 selectpicker sortable idVerification" name="sigIDVerification" style="display: none;"> … </select>
        <div class="btn-group bootstrap-select span5 sortable idVerification"> … </div>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>
// Input 2, a text input
<div id="sigIDSerialNo_field" class="clearfix  ">
    <label for="sigIDSerialNo"> … </label>
    <div class="input">
        <input id="sigIDSerialNo" class="span5 idSerialNo" type="text" value="" name="sigIDSerialNo"></input>
        <span class="help-inline"></span>
        <span class="help-block"></span>
    </div>
</div>

请注意，select元素的换行是由自定义外观引起的。

我正在尝试为三种表单中的每一种的select.idVerification元素注册一个事件监听器。当select元素被更改时，我想检查它是否是默认值，如果是，则隐藏div块（此处为div#sigIDSerialNo_field）并将input.idSerialNo的值设置为"";如果select元素的值不是默认值，它将取消隐藏div#sigIDSerialNo_field，如果它是隐藏的。我的问题是每个显示/隐藏的div的ID都不同，而且不受我的控制。

我想要做的是在.idSerialNo之后选择.idVerification的下一次出现，然后我可以获得.idSerialNo元素的祖父母。但是，我发现.next()仅适用于直接兄弟姐妹，所以我不能使用它。

有没有办法可以实现我的目标？

Answer 1

您可以使用相同的格式转到下一个.idSerialNo：

// assume item is jQuery object pointing to your current .idSerialNo
var nextSerialNo = item.closest("div.clearfix").next().find(".idSerialNo");

这个，找到当前.idSerialNo的祖父母，然后找到HTML中与您当前所在表单处于同一级别的下一个div，然后在其中找到.idSerialNo对象格。

此代码假定选择器"div.clearfix"将始终识别正确的父级。如果不是这种情况，那么你必须在该父级上一致地设置一个更好的类，或者编写更多代码以找到适合所有HTML的逻辑的正确父对象。您没有透露所有HTML，因此如果"div.clearfix"无处不在，我无法确定哪种模式可行。

此导航的关键是将层次结构上升到右侧父级，然后从那里开始.next()，然后使用右侧父级中的.find()。

Answer 2

添加一个事件监听器来检查所选项是否为默认值（我假设它是第一个元素 - 索引0）并隐藏最近的div.clearfix类的兄弟div.clearfix并清除输入兄弟姐妹。

检查已更新演示。使用next()假设div之间没有元素。我将其更改为siblings()，以确保即使div之间存在其他元素也能正常工作。

Demo

$(function () {
    $("select.idVerification").change(function () {

        var divToHide = $(this).closest("div.clearfix").siblings("div.clearfix");

        if ($(this)[0].selectedIndex == 0) {
            // clear input
            divToHide.find(".idSerialNo").val("");
            // hide
            divToHide.hide();

        } else {
            // show 
            divToHide.show();
        }
    });
});

Answer 3

我根据jfriend00和Lobo的答案确定了以下解决方案：

var idVerification = $("select.idVerification");

idVerification.each(function() {
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();
    nextIDSerialNo_field.addClass('hidden');
    nextIDSerialNo_field.hide(0);
});

idVerification.change(function() {

    var nextIDSerialNo = $(this).closest("div.clearfix").next().find(".idSerialNo");
    var nextIDSerialNo_field = $(this).closest("div.clearfix").next();

    if($(this).val() === "NONE"){
        nextIDSerialNo_field.hide('slow');
        nextIDSerialNo_field.addClass("hidden");
        nextIDSerialNo.val("");
    } else {
        nextIDSerialNo_field.removeClass("hidden");
        nextIDSerialNo_field.show("slow");
    }
});

在当前选择器之后选择下一个类的出现

3 个答案: