Question

如何使用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;
}

Answer 1

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

Answer 2

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

Answer 3

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

添加＆＃34;清除字段＆＃34;按钮使用jQuery + CSS类引导3个输入

3 个答案: