javascript - 在移动设备上切换 bootstrap input-group-addon 和 input 的位置

Question

我尝试通过使用两个输入并调整它们的显示和可见性来更改移动设备上 bootstrap input-group-addon 的位置。从前端可见性的 Angular 来看，我得到了我想要的，输入现在在插件后面......但我在#input-newsearch 上运行一些 javascript，而在移动设备上它不起作用。看起来它仍在查看第一个输入。我错过了什么或者我该如何解决这个问题？

html:

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

CSS:

.input-newsearch-mobile {
display: none;
visibility: hidden;
}   

@media (max-width: 768px){
.input-newsearch-desktop {
    display: none;
    visibility: hidden;     
}
.input-newsearch-mobile {
    display: initial;
    visibility: initial;        
}           
}

javascript:

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('#input-newsearch').val('');                                          
}); 

$('#input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});

Answer 1

我不使用 Id 作为您的选择，而是使用一个类。

它没有按预期工作的原因是因为 ID 预计只会出现一次。当您有多个具有相同 ID 的元素并尝试引用其中之一时，它会导致问题。

样式

添加了类 input-newsearch

<div class="input-group">
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-desktop" type="text">                                                                                                                                           
<span class="input-group-addon" id="delete-newsearch">Delete</span>
<span class="input-group-addon" id="remove-newsearch">Remove</span>
<input id="input-newsearch" class="form-control input-newsearch input-newsearch-mobile" type="text">                                                                                                                                                    
</div>  

Javascript

将 Id 选择器 '#input-newsearch' 更改为类 '.input-newsearch'

$('#delete-newsearch, #delete-newsearch').on('click', function() { 
$('.input-newsearch').val('');                                          
}); 

$('.input-newsearch').autocomplete({
source:'/source.php',  
minLength: 3,
...
});