Question

我有一个元素列表，我想在用户点击一个按钮后更改颜色（然后单击另一个按钮）。我知道要点击我会使用onclick更改按钮颜色，但是在点击后如何更改按钮的颜色？

例如，用户点击泰坦尼克号。什么都没发生。然后用户点击Titanic7，泰坦尼克号改变颜色并保持这种颜色。然后用户单击Titanic9。泰坦尼克号和泰坦尼克号都有“访问过的”颜色。

参见JSFiddle here

Answer 1

如果我理解正确，我会做这样的事情：

$('.song').click(function(e) {
    e.preventDefault();

    $('.selectnext').css('background-color', 'blue').removeClass('selectnext');
    $(this).addClass('selectnext');
});

Answer 2

$(function(){
    $( "a" ).click(function() {
  $( this ).toggleClass( "color" );
});
});

CSS

.color{
    background: yellow;
  }

或双击

$(function(){
$( "a" ).each(function() {
  var count = 0;   
  $( "a" ).click(function() {
        count++;
        //$( this ).text( "clicks: " + count );
        $( this ).toggleClass( "color", count % 3 === 0 );
    });
});
});

Answer 3

如果您已经在使用data-，我会执行以下操作：

$(function() {
    var currentButton;
    $('a.song').on('click',function() {
        if(currentButton === this) return;
        currentButton = this;
        $('a.song').each(function() {
          if($(this).data('visited') == 'true' && !$(this).hasClass('visited'))
              $(this).addClass('visited');
        });
       $(this).data('visited','true');
    });
});

有一个data-visited，可以跟踪点击了哪个按钮
每次点击一个按钮，检查它是否与之前点击过的按钮相同。如果没有，请更改先前单击的按钮的背景，并将当前按钮设置为已访问。

示例小提琴：http://jsfiddle.net/9eJPD/

更改先前单击的元素的颜色

3 个答案: