Question

我的代码段中有3个按钮，我想使用erase按钮。

点击erase按钮后，我想Removeclass by clicking each cells one by one。

有什么方法吗？

谢谢

var $ = jQuery;
var style ='';
let clicked=[];

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
})

 $('.click_td').on('click', function(){
  $(this).removeClass('style1 style2').addClass(style)
   let clickedID=$(this).attr('id');
   clicked.push(clickedID);
 })

.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td" id=0>color</td>
    <td class="click_td" id=1>color 2</td>
    <td class="click_td" id=2>color 3</td>
    <td class="click_td" id=3>color 4</td>
    <td class="click_td" id=4>color 5</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">can be erased</button>
<button class="click_btn" data-style="style2">cannot be erased</button>
<button class="erase">erase</button>

Answer 1

您可以尝试添加/删除可以删除样式类的类：

var $ = jQuery;
var style ='';
//let clicked=[];

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
  $('.erase').removeClass('erase-clicked');
})

$('.click_td').on('click', function(){
  $(this).addClass(style);
  let clickedID=$(this).attr('id');
  if($('.erase').hasClass('erase-clicked')){
    $(this).removeClass('style1 style2')
  }  
});

$('.erase').click(function(){
  $(this).addClass('erase-clicked');
});

.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td" id=0>color</td>
    <td class="click_td" id=1>color 2</td>
    <td class="click_td" id=2>color 3</td>
    <td class="click_td" id=3>color 4</td>
    <td class="click_td" id=4>color 5</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">can be erased</button>
<button class="click_btn" data-style="style2">cannot be erased</button>
<button class="erase">erase</button>

Answer 2

您可以改用此代码...

$('.click_btn').on('click', function () {
        e.preventDefault();
        style = $(this).data().style;
        $('.click_td').addClass(style);
    });

    $('.erase').on('click', function () {
        $('.click_td').on('click', function () {
            $(this).removeClass('style1 style2');`enter code here`
        })
    })

说明：单击任何按钮'.click_btn'时，它将基于数据样式和css类激活指定的样式...

单击“擦除”后，它会激活所有要单击的单元格，以分别删除样式类

如何通过单击元素删除类

2 个答案: