Javascript 加入“；“清除字段”；使用jQuery+；CSS类

如何仅使用jQuery和CSS类向多个Bootstrap3输入字段添加“ClearField”按钮

我已经找到了一些解决方案，可以将“清除字段”按钮添加到具有特定ID的字段中，但到目前为止，还没有任何解决方案可以按类执行。我有一个有很多字段的表单，我不想为每个字段重复我的代码

但我不知道如何让jQuery只清除一个字段并切换一个图标，而不是全部

//JS

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

1） 您可以使用

$（this）

获取对当前目标元素的引用

2） 使用仅切换图标的可见性，该图标是当前要输入的

输入的下一个直接同级图标

3） 使用仅清除
输入
，该输入是单击的清除图标的前一个同级：

最终代码应该如下所示：

$(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();
    });
});

尝试将javascript代码更改为：

        $(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();
            });
        });

本质上，它所做的是将作用域添加到清除按钮，以便将其限制在同级。还有其他jQuery函数可能更具体，但这应该可以工作

另一个选项是使用
.sibbines（）
确保使用
searchclear
类只针对同级

        $(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();
            });
        });


        $(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();
            });
        });

        $(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();
            });
        });