Afficher/Masquer la logique avec BeginCollectionItem

Question

J'utilise BeginCollectionItem et j'essaie de comprendre comment obtenir que chaque valeur de collection individuelle fasse une logique show/hide conditionnelle. Par exemple, si je le balisage de rasoir suivant:

<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> 

je dois montrer le « show-if-b » div si l'élément « b » est sélectionné, sinon il doit se cacher. Cette logique doit exécuter le changement de la sélection et lorsque la page se charge ("b" pourrait être sauvegardé) donc je n'ai pas toujours un événement à attacher.

J'ai essayé différentes approches avec jQuery .closest(), .find() et .parents() mais je n'arrive pas à obtenir la valeur de sélection spécifique dans chaque collection.

Toute aide est grandement appréciée.

Answer 1

Vous pouvez utiliser $(this).next() dans on("change") pour sélectionner chaque élément div qui a "b is selected". Je n'ai pas défini ces éléments par défaut, mais vous pouvez modifier cette propriété CSS en fonction de la valeur initiale de votre modèle. Vous pouvez mettre en œuvre comme suit.

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

Ajouter "Effondrement" classe à la div et essayez d'utiliser le ci-dessous css et javascript code (Ceci cacher et réafficher la div en fonction de la valeur sélectionnée): 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"); 
    } 
}); 

Si vous voulez l'option "b" pour être Selec ted à la page ci-dessous le code charge l'utilisation et

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

Answer 3

Bien que @ dessus de la réponse de user8175473 fonctionnera, je trouve que je peux aussi utiliser les fonctions de .each() et .Find() jQuery à boucle à travers chaque collection:

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