Question

我想制作一个按钮，它会来回改变表格单元格的样式，就像一个开关，但它不起作用。我发现的唯一方法是添加另一个按钮。

$('.table__button').click(function() {
for (var i = 0; i < $('table.table td').length; i++) {
  if (!$($('table.table td')[i]).hasClass('table__cell--disabled')) {
    $($('table.table td')[i]).css('background', $($('table.table td')[i]).attr('data-colour'));
    $($('table.table td')[i]).css('text-decoration','underline');
    $($('table.table td')[i]).css('font-weight','bold');
    $($('table.table td')[i]).css('text-align','center');
    $($('table.table td')[i]).addClass('is--coloured');
    $($('table.table td')[i]).html('I am now ' + $($('table.table td')[i]).attr('data-colour'));
    $($('button')).html('Remove colour');
    $($('button')).removeClass('table__button');
    $($('button')).addClass('table__button__reverse');
  }
}
});

$('.table__button__reverse').click(function(){
for (var i = 0; i < $('table.table td').length; i++){
  if ($($('table.table td')[i]).hasClass('is--coloured')){
    $($('table.table td')[i]).css('background', 'none');
    $($('table.table td')[i]).css('text-decoration','none');
    $($('table.table td')[i]).css('font-weight','normal');
    $($('table.table td')[i]).css('text-align','left');
    $($('table.table td')[i]).removeClass('is--coloured');
    $($('table.table td')[i]).html('Make me ' + $($('table.table td')[i]).attr('data-colour'));
    $($('button')).html('Colourfy table cells');
  }
}
});

这是我到目前为止所做的：codepen

可以使用相同的按钮添加和删除样式而不使用toggle（）吗？

Answer 1

您可以使用局部变量并将colourfy状态存储在其中。

检查以下代码：

var colourfy = false;

function colourfyOn () {
  for (var i = 0; i < $('table.table td').length; i++) {
      if (!$($('table.table td')[i]).hasClass('table__cell--disabled')) {
        $($('table.table td')[i]).css('background', $($('table.table td')[i]).attr('data-colour'));
        $($('table.table td')[i]).css('text-decoration','underline');
        $($('table.table td')[i]).css('font-weight','bold');
        $($('table.table td')[i]).css('text-align','center');
        $($('table.table td')[i]).addClass('is--coloured');
        $($('table.table td')[i]).html('I am now ' + $($('table.table td')[i]).attr('data-colour'));
        $($('button')).html('Remove colour');
        $($('button')).removeClass('table__button');
        $($('button')).addClass('table__button__reverse');
        console.log('success1');
      }
    }
}

function colourfyOff() {
  for (var i = 0; i < $('table.table td').length; i++){
      if ($($('table.table td')[i]).hasClass('is--coloured')){
        $($('table.table td')[i]).css('background', 'none');
        $($('table.table td')[i]).css('text-decoration','none');
        $($('table.table td')[i]).css('font-weight','normal');
        $($('table.table td')[i]).css('text-align','left');
        $($('table.table td')[i]).removeClass('is--coloured');
        $($('table.table td')[i]).html('Make me ' + $($('table.table td')[i]).attr('data-colour'));
        $($('button')).html('Colourfy table cells');
        console.log('success2');
      }
    }
}

$('.table__button').click(function() {
    colourfy = !colourfy;
    
    if (colourfy) {
      colourfyOn();
    } else {
      colourfyOff();
    }
});

table {
  width: 100%;
  margin-bottom: 40px;
}

tr:nth-child(odd) {
  background: #f0f0f0;
}

td {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <tr class="table__row">
      <td class="table__cell" data-colour="green">Make me green</td>
      <td class="table__cell" data-colour="yellow">Make me yellow</td>
    </tr>
    <tr class="table__row">
      <td class="table__cell" data-colour="blue">Make me blue</td>
      <td class="table__cell" data-colour="red">Make me red</td>
    </tr>
    <tr class="table__row">
      <td class="table__cell--disabled">Leave me alone</td>
      <td class="table__cell--disabled">Leave me alone</td>
    </tr>
  </table>
  <button class="table__button" href="#">Colourfy table cells</button>

如何使按钮像jQuery中的切换一样工作

1 个答案: