Javascript在鼠标单击时更改样式

Question

我有一个小的jquery脚本：

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

});

这给我带来了一个div onclick。问题是我只想让最后点击的元素着色。我不知道我是否可以在每次点击后删除样式( css样式)？

谢谢

Answer 1

我会使用像.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");});

Answer 2

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

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