Показать / скрыть логику с помощью BeginCollectionItem

Question

Я использую BeginCollectionItem и пытаюсь выяснить, как получить каждое отдельное значение коллекции для выполнения условной логики показа / скрытия. Например, если у меня есть следующая бритва разметки:

<div class="collection">
    @using (Html.BeginCollectionItem(nameof(Item)))
    {
        <select class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
        </select>

        <div class="show-if-b">b is selected</div>
    }
</div>

Мне нужно показать div "show-if-b", если выбран элемент "b", иначе его нужно скрыть. Эта логика должна запускаться при изменении выбора и при загрузке страницы (можно сохранить "b"), поэтому у меня не всегда есть событие, к которому нужно присоединиться.

Я пробовал разные подходы с jQuery .closest(), .find() и.parents(), но я не могу получить конкретное значение select в каждой коллекции.

Любая помощь с благодарностью.

Answer 1

Ты можешь использовать $(this).next() в on("change") выбрать каждый элемент div, который имеет "b is selected", Я установил стиль отображения этих элементов по умолчанию, но вы можете изменить это свойство css в соответствии с начальным значением вашей модели. Вы можете реализовать как следующее.

$(".collection .select-class").on("change", function(){
     var val = $(this).val();
     if(val == "a")
     {
         $(this).next().hide();
     }
     else
     {
         $(this).next().show();
     }
     
     
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">
    <table>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
       <tr>
          <select style="float:left" class="select-class" id="select-id" asp-for="SelectExample">
            <option value="a">a</option>
            <option value="b">b</option>
         </select>
         <div class="show-if-b" style="display:none">b is selected</div>
       </tr>
    </table>    
</div>

Answer 2

Добавьте "свернутый" класс в div и попробуйте использовать приведенный ниже код css и javascript (это позволит скрыть и показать div в зависимости от выбранного значения): HTML:

<div class="show-if-b collapsed">b is selected</div> 

CSS:

 .collapsed{
      display : none;
    } 

Javascript:

$(document).on("change","#select-id",function(){
    if($(this).val() == "b"){
        $(".show-if-b").removeClass("collapsed");
    }
    else{
      $(".show-if-b").addClass("collapsed");
    }
});

Если вы хотите, чтобы при загрузке страницы была выбрана опция "b", используйте также приведенный ниже код

 $(document).ready(function(){
           $("#select-id").val("b");
           $(".show-if-b").removeClass("collapsed");
        });

Answer 3

Хотя приведенный выше ответ @user8175473 будет работать, я обнаружил, что могу также использовать функции.each() и.find() jQuery для циклического прохождения каждой коллекции:

$(".collection").each(function (index)
{
    if ($(this).find("#select-id").val() === "b")
    {
        $(this).find(".show-if-b").show();
    }
    else
    {
        $(this).find(".show-if-b").hide();
    }
});