Блог

Главная - Вопросы по программированию - Целевой следующий элемент с определенным атрибутом класса

Целевой следующий элемент с определенным атрибутом класса

#jquery

#jquery

Вопрос:

У меня есть таблица с выпадающим списком в одном столбце и скрытыми разделениями в следующем столбце. В зависимости от значения выпадающего списка должен отображаться только один 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
     })

Ответ №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>

Ответ №2:

Установите div display:none и используйте jquery hide() и show() для отображения выбранного элемента.В моем коде я изначально отобразил ‘FirstDiv’, потому что опция по умолчанию в поле выбора — ‘Показать первым’, иначе вы можете добавить display:none в оба div в css. Надеюсь, это поможет

 $('.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>