Javascript在鼠标单击时更改样式

Javascript change style on mouse click

本文关键字：样式 单击 鼠标 Javascript      更新时间：2023-09-26

我有一个小jquery脚本：

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

这给我一个div onclick的颜色。问题是，我只希望最后一个点击的元素是彩色的。我不知道我可以在每次点击后删除样式（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");});

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

var lastElm=空$（'.product_types>li'）.click（function（）{if（lastElm）$（lastElm）.css（'backgroundColor'，'#[Your original color]'）lastElm=这个；$（这个）.css（'backgroundColor'，'#EE178C'）.siblings（）.css（'backgroundColor'，'#ffffff'）；//$（'.product_types>li'）.removeClass（backgroundColor）；})；

您需要一个变量来存储实际的彩色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属性。这样可以更好地分离代码逻辑和显示。

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

相关文章：