Question

我在编写函数时遇到问题，根据所选值隐藏两个单元格。最大的问题是生成 HTML，并且可以有一个这样的选择，或者其中八个。为了使事情变得更有趣，每个选择都放在一个单独的div中，当显示一个时，其他的被隐藏。

这是我用来切换单元格的函数。仅当选定的值为“Z”时，才能显示单元格，否则必须隐藏它们。它仅适用于第一个选择，而其他选项完全被忽略。我试图对.each()的每个元素使用id="selector"函数，但是元素索引的质量相当大，而且它也没有用。

$("#selector").change(function(){
  if($(this).val().trim() == 'Z'){
      $("#labelToHide").toggle(true);
      $("#selectToHide").toggle(true);
  } else {
      $("#labelToHide").toggle(false);
      $("#selectToHide").toggle(false);
  }
});

这是工作JSFiddle。它可能看起来不完整，但它足以模拟真实情况。 Bellow是我使用的XML代码，用于生成HTML。

<xh:td class="RightColumn" id="selectToHide">
    <form:selectOne ...>
        <!-- form code -->
    </form:selectOne>
</xh:td>

有什么方法可以让这个脚本仅适用于当前显示的div？或者还有其他一些解决方法吗？

Answer 1

通过将问题更改为id，您可以解决多个class的问题，您可以使用以下内容：

$(".selector").change(function () {
 if ($(this).val().trim() == 'Z') {
    $(this).parent().nextAll("td").show();
 } else {
    $(this).parent().nextAll("td").hide();
 }
});

$(".selectToHide select").change(function () {
 if ($(this).val().trim() == 'Y') {
    $(this).parent('td').prev().show();
 } else {
    $(this).parent('td').prev().hide();
 }
});

Updated fiddle

Answer 2

您必须使用唯一ID ，使用classes代替ID来对元素进行分组。而不是切换使用show / hide并指定公共类来选择和标记例如toShowHide并使用单个调用来显示隐藏。我已经更改了html属性，只是为了证明你应该根据你的要求进行更改，记住id必须是唯一的。

<强> Live Demo

$(".selector").change(function () {
    if ($(this).val().trim() == 'Z') 
        $(this).parent().siblings(".toShowHide").show();        
     else 
        $(this).parent().siblings(".toShowHide").hide();
});

Answer 3

随着ID的多次使用，它永远不会像你那样工作。在下面我已经将所有ID更改为相关类并修改了脚本以将其考虑在内......

<强> HTML

<div id="divOne">
    <table class="gridtable">
        <tr>
            <td id="allwaysShown">Allways Shown</td>
            <td id="allwaysShown">
                <select class="selector">
                    <option value="Z">Z</option>
                    <option value="X">X</option>
                </select>
            </td>
            <td class="toHide">Hide this</td>
            <td class="toHide">
                <select>
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                </select>
            </td>
        </tr>
    </table>
</div>
<div id="divTwo">
    <table class="gridtable">
        <tr>
            <td id="allwaysShown">Allways Shown</td>
            <td id="allwaysShown">
                <select class="selector">
                    <option value="Z">Z</option>
                    <option value="X">X</option>
                </select>
            </td>
            <td class="toHide">Hide this</td>
            <td class="toHide">
                <select>
                    <option value="Y">Yes</option>
                    <option value="N">No</option>
                </select>
            </td>
        </tr>
    </table>
</div>

<强>的Javascript

$(".selector").change(function () {
    if ($(this).val().trim() == 'Z') {
        $(this).closest("tr").find(".toHide").show();
    } else {
        $(this).closest("tr").find(".toHide").hide();
    }
});

现在这样做是当一个select元素（类selector）发生变化时，它会解析DOM以找到它所包含的行，然后找到所有带有类{{{ 1}}，并隐藏或显示它们。

Your jsfiddle, modified...

Answer 4

在HTML中，id都是唯一的，这意味着在单个HTML页面上只能有一个同名的id，如果你以前使用过#selector，你就不应该再使用它了（它首先不会起作用。）

始终使用一个类。

这里需要your working code

    <div id="divOne">
        <table class="gridtable">
            <tr>
                <td class="allwaysShown">Allways Shown</td>
                <td class="allwaysShown">
                    <select class="selector">
                        <option value="Z">Z</option>
                        <option value="X">X</option>
                    </select>
                </td>
                <td class="hide_this">Hide this</td>
                <td class="hide_this">
                    <select>
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>
    <div id="divTwo">
        <table class="gridtable">
            <tr>
                <td class="allwaysShown">Allways Shown</td>
                <td class="allwaysShown">
                    <select class="selector">
                        <option value="Z">Z</option>
                        <option value="X">X</option>
                    </select>
                </td>
                <td class="hide_this">Hide this</td>
                <td class="hide_this">
                    <select>
                        <option value="Y">Yes</option>
                        <option value="N">No</option>
                    </select>
                </td>
            </tr>
        </table>
    </div>

<强> JQuery的

    $(".selector").change(function () {
        if ($(this).val().trim() == 'Z') {
            $(this).closest('tr').find('.hide_this').show();
        } else {
            $(this).closest('tr').find('.hide_this').hide();
        }
    });

根据选择值隐藏单元格 - 生成的HTML

4 个答案: