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

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

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);

});

Answer 3

您需要一个存储实际彩色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类而不是manualy在Javascript中设置CSS属性。这样可以更好地分离代码逻辑和显示。

我还将所有内容放在一个闭包中，因此错误地无法通过其他脚本覆盖变量。

单击鼠标时Javascript更改样式

3 个答案: