Question

我有一个表格，其中一列具有下拉菜单，而下一列则具有隐藏的DIV。根据下拉值，下一列中将仅显示一个DIV。

这是我的布局。我已经能够定位到下一个<td>，但是还没有在<div>中遇到实际的<td>。

我没有收到任何jquery错误。谢谢！

...
<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>

<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>
...


$('.dropdown').change(function() {
        id = this.id;
        value = $(this).val();

        $(this).closest("td > .firstDiv").next().hide(); //First hide everything, even if already hidden
        $(this).closest("td > .secondDiv").next().hide(); //First hide everything, even if already hidden

        $(this).closest("td > ." + value).next().toggle(); //Show the chosen one
     })

Answer 1

您可以尝试像这样$(this).closest("tr").find("td .firstDiv").hide()进行选择。这样，您将找到包含下拉列表的tr元素，然后在同一行中的td中找到所需的类。

$(".firstDiv").hide();
$(".secondDiv").hide();

$('.dropdown').change(function() {
        value = $(this).val();
        $(this).closest("tr").find("td .firstDiv").hide(); //First hide everything, even if already hidden
        $(this).closest("tr").find("td .secondDiv").hide(); //First hide everything, even if already hidden

        $(this).closest("tr").find("td ." + value).toggle(); //Show the chosen one
     })

<table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>

<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>
</table>

Answer 2

设置div display:none并使用jquery hide()和show()显示选定的元素。在我的代码中，我最初显示的是“ FirstDiv”，因为选择框中的默认选项是“显示第一”，否则您可以将display:none添加到CSS中的两个div中。希望这会有所帮助

$('.dropdown').change(function(e){

    $(this).parent().next().find('.'+$(this).val()).show().siblings().hide()

})

.secondDiv
{
   display:none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>

<tr>
    <!–– Dropdown column ––>
    <td>
    <select class="dropdown">
        <option value="firstDiv">Show First</option>
        <option value="secondDiv">Show Second</option>
    </select>
    </td>

    <!–– Column with hidden/visible Divs we are targeting ––>
    <td>
        <div class="firstDiv">First Div</div>
        <div class="secondDiv">Second Div</div>
    </td>
</tr>
</tbody>
</table>

使用特定的类属性定位下一个元素

2 个答案: