添加“;清除字段”;按钮引导3输入使用jQuery+CSS类

Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class

本文关键字：输入 jQuery+CSS 清除 字段 按钮 添加      更新时间：2023-09-26

如何使用jQuery和CSS类将"清除字段"按钮添加到多个Bootstrap 3输入字段？

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

到目前为止，我已经尝试过了（Bootply），但我不知道如何让jQuery只清除一个字段并切换一个图标，而不是全部清除。

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

1）您可以使用$(this)获取对当前目标元素的引用

2） 使用.next（）仅切换图标的可见性，该图标是您当前在中的input的下一个直接同级

3） 使用.prve（）仅清除input，它是所单击的清除图标的前一个同级：

最终代码应该看起来像：

$(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演示

尝试将您的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函数可能更具体，但这应该可以工作。

http://www.bootply.com/130368

另一个选项是使用.siblings()来确保您只针对具有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();
            });
        });

http://www.bootply.com/130369

相关文章：