使用 jQuery + CSS 类向 Bootstrap 3 输入添加“清除字段”按钮答案

【问题标题】：Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class使用 jQuery + CSS 类向 Bootstrap 3 输入添加“清除字段”按钮
【发布时间】：2014-05-30 15:55:04
【问题描述】：

如何仅使用 jQuery 和 CSS 类向多个 Bootstrap 3 输入字段添加“清除字段”按钮？

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

I've tried this so far (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;
}

【问题讨论】：

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

另一种选择是使用.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

【讨论】：

【解决方案2】：

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

2) 使用 .next() 仅切换您当前键入的 input 的下一个直接兄弟图标的可见性

3) 使用 .prev() 仅清除 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 Demo

【讨论】：

【解决方案3】：

尝试将您的 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

【讨论】：