Question

序言：here找到了我的问题的可能重复内容，但对我来说，这个问题没有得到充分的回答。给出了解决方法，但没有提供对是否可能的问题的明确答案。

问题： 在我的网站上，当用户点击按钮（或屏幕区域）时，我希望该区域为＆＃34; flash＆＃34;在返回其原始状态之前的几次。（我认为这给用户一种令人放心的感觉，因为在某些情况下，他们可能会在给出反馈之前有短暂的延迟。）

无论如何，我已经成功使用了一些JavaScript和jQuery，你可以看到结果here >>。

正如您可能已经注意到的，问题是在闪烁完成后，元素不会返回其原始状态。相反，它保持了它的最后一次闪光＆＃34; state，并覆盖在页面加载时最初为对象设置样式的基础CSS样式。

我使用以下jQuery设置元素的样式：

$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);

我尝试＆＃39;用它来取消它的样式：

$jq_obj.removeAttr('background-color').removeAttr('color');

我也尝试过：;

$jq_obj.css('background-color','').css('color','');

尽管文档说这应该删除样式，但它并没有。

是否有解决方案，或者我是否必须恢复到我的序言中提到的解决方案？关于JavaScript选项的好处是，当你想要稍微使用动画时，它会变得更加通用。

谢谢，

=== 编辑2014-06-28 ===

为了说明为什么课程解决方案不整洁，请看这个小提琴：http://jsfiddle.net/Y9L4x/（灵感来自@BiffMaGriff＆＃39;提议的解决方案：http://jsfiddle.net/rte3G/）

问题在于，闪存的元素已经可以通过多个类进行CSS修改。

我知道在应用＆＃34; flash＆＃34;之前我可以先删除样式类。类，使JavaScript和/或CSS规则等复杂化等。

但是，寻找非类解决方案的重点是，在实际情况下，此选项变得非常冗长，并且您倾向于必须单独编写每个闪存对象，而不是我正在搜索的整洁的 one-JavaScript-function-fits-all 。

Answer 1

你想要把你的风格作为课程。

.activated{
    background-color: red; //or whatever else
}

然后使用你的jquery，你可以根据我假设你已经在你的javascript中的延迟来切换它们几次。

$jq_obj.toggleClass('activated');

Answer 2

试试这个：

$jq_obj.attr('style','');

Answer 3

这个问题的直接答案似乎很简单，没有＆＃34;。

你无法告诉JavaScript为一个对象设置样式，然后在稍后阶段，请求JavaScript将样式责任归还给CSS。

然而，另一个混乱的解决方法是在包含闪烁对象的元素内重新绘制HTML。

$jq_flashing_obj.parent().html(original_html_);

这需要将闪烁对象包装在div或span元素中，以确保父元素只包含闪烁元素。

<div class="multiple-children">
    <a href="#">link 1</a>
    <span class="wrapper"><a href="#">Click me to watch me flash</a></span>
    <a href="#">link 3</a>
</div>

然后，当然，您必须在闪烁开始之前捕获闪烁对象的outerHTML。

original_html_ = $jq_obj[0].outerHTML;

生成的JavaScript有点冗长，如您所见：http://jsfiddle.net/CgsLs/。但是，它确实具有以下好处：

可重复使用CSS :hover及其他凌乱样式的所有可点击元素
可以选择在JS
独立于CSS，意味着代码在一个文件中，因此更易于维护

也存在缺点

需要使用JQuery on()函数（而不是简单的click事件处理程序）

Anyhoo ......它可能不是每个人的解决方案。在某些情况下（甚至可能大多数情况），类选项可能更简单。

但这是解决JavaScript /浏览器技术中这一固有缺点的另一种可行方法。

删除JavaScript样式，允许CSS控制

3 个答案: