L'ajout de “Champ libre” boutons de Bootstrap 3 entrées à l'aide de jQuery + CSS de la classe

Comment puis-je ajouter un "champ libre" bouton pour plusieurs Bootstrap 3 champs de saisie juste en utilisant jQuery et une classe CSS?

J'ai trouvé des solutions qui peuvent ajouter un "champ libre" pour un champ avec un ID particulier, mais rien d'aussi loin que peut le faire en classe. J'ai un formulaire avec un grand nombre de domaines et je préfère ne pas avoir à répéter mon code pour chaque champ.

J'ai essayé jusqu'à présent (Bootply), mais je ne peux pas comprendre comment obtenir jQuery pour effacer simplement l'un des champs et de basculer de l'une icône, pas tous d'entre eux.

//JS

        $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(".searchclear").toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(".searchinput").val('').focus();
                $(this).hide();
            });
        });

//HTML

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle">           </span>
       </div>

       <div class="btn-group">
         <input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value="">
         <span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>
       </div>

//CSS

.searchinput {
    width: 200px;
}

.searchclear {
    position:absolute;
    right:5px;
    top:0;
    bottom:0;
    height:14px;
    margin:auto;
    font-size:14px;
    cursor:pointer;
    color:#ccc;
}
InformationsquelleAutor schnauss | 2014-04-16
  1. 4

    1) Vous pouvez utiliser $(this) pour obtenir une référence à l'actuel ciblé élément

    2) Utiliser .next() pour activer /désactiver la visibilité pour seulement l'icône qui est le plus proche de la fratrie de input que vous êtes actuellement clé dans

    3) Utilisation .prev() pour effacer uniquement les input immédiat frère précédent de l'icône d'effacement qui est cliqué:

    Code Final doit ressembler à:

    $(document).ready(function () {
    $(".searchinput").keyup(function () {
        $(this).next().toggle(Boolean($(this).val()));
    });
    $(".searchclear").toggle(Boolean($(".searchinput").val()));
    $(".searchclear").click(function () {
        $(this).prev().val('').focus();
        $(this).hide();
    });
});

    Bootply Démo

    InformationsquelleAutor Felix
  2. 1

    Essayez de changer votre code javascript à ceci:

            $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(this).parent().find('.searchclear').toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(this).parent().find('.searchinput').val('').focus();
                $(this).hide();
            });
        });

    Essentiellement ce qu'il fait est d'ajouter de la portée de l'boutons clairs, de sorte qu'il est limité à l'enfant. Il ya d'autres fonctions jQuery qui pourrait être plus précis, mais cela devrait fonctionner.

    http://www.bootply.com/130368

    InformationsquelleAutor Lawrence Johnson
  3. 1

    Une autre option serait d'utiliser .siblings() pour vous assurer de cibler seulement les frères et sœurs avec le searchclear classe.

            $(document).ready(function(){
            $(".searchinput").keyup(function(){
                $(this).siblings(".searchclear").toggle(Boolean($(this).val()));
            });
            $(".searchclear").toggle(Boolean($(".searchinput").val()));
            $(".searchclear").click(function(){
                $(".searchinput").val('').focus();
                $(this).hide();
            });
        });

    http://www.bootply.com/130369

    InformationsquelleAutor ivelander