1

我正在尝试根据对另一个表单字段“idVerification”的更改来更改一个表单字段“idSerialNo”的状态，但是我很难访问正确的元素，因为页面上有三个表单。

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

// 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.idVerification三种表单中的每一个的元素注册一个事件侦听器。When the select element is changed, I want to check if it is the default value, if so hide the the div block (here div#sigIDSerialNo_field) and set the value of input.idSerialNoto ""; 如果选择元素的值不是默认值，它将取消隐藏div#sigIDSerialNo_field，如果它是隐藏的。我的问题是每个要显示/隐藏的 div 的 id 都会不同，并且不受我的控制。

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

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

4

3 回答 3

1

您可以.idSerialNo像这样以相同的形式进入下一个：

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

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

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

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

于 2013-09-10T14:53:32.883 回答
1

添加一个事件侦听器以检查所选项目是否为默认项（我假设它是第一个元素 - 索引 0）并隐藏div.clearfix最近div.clearfix类的同级并清除同级中的输入。

检查更新的演示。Usingnext()假设 s 之间没有元素div。我将其更改为siblings()以确保即使divs 之间还有其他元素也能正常工作。

演示 

$(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();
        }
    });
});
于 2013-09-10T15:37:28.013 回答
0

根据 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");
    }
});
于 2013-09-10T16:23:12.977 回答