twitter-bootstrap 使用 jQuery + CSS 类向 Bootstrap 3 输入添加“清除字段”按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23098215/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class
提问by caitlin
How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?
如何仅使用 jQuery 和 CSS 类将“清除字段”按钮添加到多个 Bootstrap 3 输入字段？
I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.
我找到了可以将“清除字段”按钮添加到具有特定 ID 的字段的解决方案，但到目前为止还没有任何方法可以按类来完成。我有一个包含很多字段的表单，我宁愿不必为每个字段再次重复我的代码。
I've tried this so far (Bootply),but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.
到目前为止，我已经尝试过这个（Bootply），但我不知道如何让 jQuery 只清除一个字段并切换一个图标，而不是全部。
//JS
//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
//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
//CSS
.searchinput {
width: 200px;
}
.searchclear {
position:absolute;
right:5px;
top:0;
bottom:0;
height:14px;
margin:auto;
font-size:14px;
cursor:pointer;
color:#ccc;
}
回答by Felix
1) You can use $(this)to get a reference to the current targeted element
1) 可以使用$(this)获取当前目标元素的引用
2) Use .next()to toggle the visibility for only the icon which is the next immediate sibling of inputthat you're currenlty key in
2) 使用.next()仅切换图标的可见性，该图标是input您当前键入的下一个直接兄弟
3) Use .prev()to clear only the inputwhich is the immediate previous sibling of clear icon that is clicked:
3) 使用.prev()只input清除被点击的清除图标的前一个兄弟：
Final code should look like:
最终代码应如下所示：
$(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();
});
});
回答by Lawrence Johnson
Try changing your javascript code to this:
尝试将您的 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();
});
});
Essentially what it does is add scope to the clear buttons so that it is limited to the sibling. There are other jQuery functions that might be more specific, but this should work.
本质上，它所做的是为清除按钮添加范围，使其仅限于同级按钮。还有其他 jQuery 函数可能更具体，但这应该可行。
回答by ivelander
Another option would be to use .siblings()to make sure you are targeting just the siblings with the searchclearclass.
另一种选择是使用.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();
});
});
