Javascript在鼠标单击时更改样式

我有一个小jquery脚本：

 $('.product_types > li').click(function() {
 $(this)
    .css('backgroundColor','#EE178C')
    .siblings()
    .css('backgroundColor','#ffffff');
   // $('.product_types > li').removeClass(backgroundColor);

});

这给我涂了一层颜色。问题是，我只希望最后单击的元素被着色。我不知道每次点击后是否可以删除样式（css样式）

---

谢谢

您可以将最后单击的元素存储在全局变量中，然后单击“重置其颜色”：

var lastElm = null $('.product_types > li').click(function() { if( lastElm ) $(lastElm).css('backgroundColor','#[Your original color]') lastElm = this; $(this) .css('backgroundColor','#EE178C') .siblings() .css('backgroundColor','#ffffff'); // $('.product_types > li').removeClass(backgroundColor); }); var lastElm=null $（'.product_types>li'）。单击（函数（）{ if（lastElm）$（lastElm.css（'backgroundColor'，'#[您的原始颜色]'）） lastElm=这个； $（本） .css（'backgroundColor'，'#EE178C'） .兄弟姐妹（） .css（'backgroundColor'，'#ffffff'）； //$（'.product_types>li'）.removeClass（背景色）； });

---

您需要一个变量来存储实际的彩色div并删除其上的样式。类似这样的东西（未经测试）应该可以做到：

(function(){
var coloredDiv = null;

$('.product_types > li').click(function() {
    var item = $(this);
    if(coloredDiv != null) coloredDiv.removeClass('someCSSClassThatColorMyDiv');
    item.addClass('someCSSClassThatColorMyDiv');
    coloredDiv = item;
});

})();

注意：我还建议使用CSS类，而不是在Javascript中手动设置CSS属性。这样可以更好地分离代码逻辑和显示

---

我还将整个内容放在一个闭包中，这样变量就不会被其他脚本错误地覆盖。

我会使用类似

.lastClicked

的css类，并在单击新元素时使用jquery删除

.lastClicked

的所有实例

.lastClicked{ background-color:#EE178C; }
.lastClicked (siblingName) { background-color: #ffffff; }

您的jquery代码如下所示：

$('.product_types > li').click(function() { 
  $(".lastClicked").removeClass("lastClicked");
  $(this).addClass("lastClicked");});

---

我不确定我是否理解这个问题。。。单击的最后一个元素是彩色的，其他元素不是@城镇：单击元素#1并更改其颜色。然后单击元素#2。当我们单击#2时，我们不仅要将其更改为新颜色，还要将#1更改回其原始颜色。@DOK:这是假设原始颜色不是白色吗？很好的解决方案：D但是，如果将taht存储在变量中，则需要触发对DOM的查找以检索$（“.lastClicked”），这是无用的。@deadalnix-是的，绝对正确，但你比我先发布了我的想法，所以我想我应该快速修改并发布另一个选项~我不知道jquery，但这是我在普通老JavaScript中使用的方法：）我也不知道jquery，但这很简单，因为你正在将

lastElm

的

背景色设置为
[您的原始颜色]
但是（假设
lastElm
是当前元素的同级）将其
背景颜色设置为白色，因此这将与问题中的代码相同，只是效率较低。lastElm在该颜色更改后立即设置为当前元素（第4行）即使它回答了问题，此示例代码也充满了错误的做法，这将导致脚本未来的开发出现问题。首先，lastEleme是全局的，因此可以由其他脚本修改。这是不可靠的。您混合了显示属性和代码逻辑，并假设要填充无用的前提条件（所有的DOV都有相同的背景颜色和xhtml结构，以确保“.product_types>li”是同级的）。我肯定不会在我的程序中使用该示例代码。