我正在使用 jquery ui 自动完成功能在我的网站上进行搜索。我想在返回结果时添加一个简单的加载微调器。加载结果时，jquery ui 自动添加类“ui-autocomplete-loading”。我已经向此类添加了一些 css，以便在其处于事件状态时添加背景图像。奇怪的是，类的添加和删除都很好，但样式没有应用。但是，如果我手动添加 ui-autocomplete-loading 类，样式就会显示出来。我一直在绞尽脑汁地想弄清楚这个问题!
自动添加“ui-autocomplete-loading”
手动添加“ui-autocomplete-loading”
CSS:
.ui-autocomplete-loading {
background: red url('/static/images/ajax-loader.gif') no-repeat right center!important;
}
最佳答案
如果您查看 jQuery UI 脚本，您将看到自动应用 .ui-autocomplete-loading 类。可以在 css 中覆盖此样式以显示您选择的图像或样式。
问题之一是 CSS 可能与其他样式发生冲突。您可以通过在 DevTools、Firebug 等中调试脚本，然后检查应用的元素样式来确定这是否是一个问题。
简单的解决方法是增加类的特殊性。例如，在 CSS 中添加 input 元素可能会达到目的。 input.ui-autocomplete-loading { background:url('img/loading.gif') 无重复右中心; }
您可以在下面的示例中看到，我检查了 CSS 规则，发现 Foundation 框架中的样式覆盖了我的 .ui-autocomplete-loading 样式。我可以通过在调试脚本时取消选中样式来验证这一点。
所以，我修改了 CSS，您可以在此处看到更新后的样式。
关于css - 添加了 jquery ui-autocomplete-loading 类，但样式不适用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10854483/