Javascript 如何通过单击html表格中的按钮来设置类

我有html表格。我想通过单击自身来更改它的

class

当我更改类时，我想通过单击它们后面的

按钮来选择每个类

我的尝试如下。如何通过单击
按钮来选择
样式

谢谢

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

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      $(this).AddClass(style);  ??
    });


颜色
颜色2
样式1
样式2
您不应该在元素中多次使用相同的属性，如果这样做，第一次之后的属性将被忽略。虽然最好的方法是在这里使用数据-*属性。另外，
AddClass
中有一个打字错误，应该是
AddClass

您可以尝试以下方法：


var风格；
$（'.click_btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
style=$（this.data（'style'）；
})
$（'.click_td'）。在（'click'，函数（e）{
$（this.removeClass（'style1，style2'）；
e、 预防默认值（）；
$（此）.addClass（样式）；
风格=''；
});
.style1{
背景：rgb（255,0255）；
边界半径：5px；
颜色：红色；
}
.style2{
背景：rgb（0，255，255）；
边界半径：5px；
颜色：绿色；
}

颜色
颜色2
样式1
style2
再次使用
class
属性并不是一个好的做法，我们可以用
数据
属性替换它。因此，每次单击按钮时，都会获取
数据
属性值，然后将该值添加到表td
click\u td

现在只需点击按钮即可完成，但也可以用点击
td
；）来代替


var$=jQuery；
$（'.click_btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
style=$（this.data（）.style）；
$（'.click_td'）.removeClass（'style1 style2'）.addClass（style）
})
.style1{
背景：rgb（255,0255）；
边界半径：5px；
}
.style2{
背景：rgb（0，255，255）；
边界半径：5px；
}

颜色
颜色2
样式1
样式2
设置样式以便下次删除时，需要保存以前的样式值
按钮元素中有两个
class
属性
考虑使用
innerText
而不是
class
值

让prevStyle=''；
让风格=“”；
$（'.click_btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
风格=风格；
style=$（this.text（）；
})
$（'.click_td'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this）.removeClass（prevStyle）；
$（此）.addClass（样式）；
});
.style1{
背景：rgb（255,0255）；
边界半径：5px；
}
.style2{
背景：rgb（0，255，255）；
边界半径：5px；
}

颜色
颜色2
样式1
样式2
$（（）=>{
var style=$（this.attr（'class'）；
$（'.click_btn'）。在（'click'，函数（e）{
e、 预防默认值（）；
style=$（this.attr（'class'）；
})
$（'.click_td'）。在（'click'，函数（e）{
e、 预防默认值（）；
console.log（风格）；
$（this.attr（'class'，''）；
$（此）.addClass（样式）；
});
})
.style1{
背景：rgb（255,0255）；
边界半径：5px；
}
.style2{
背景：rgb（0，255，255）；
边界半径：5px；
}

颜色
颜色2
样式1
样式2
谢谢，我可以通过单击按钮选择样式吗？我运行代码片段，但无法复制它。当我点击
style1
然后点击
td
，
td
将变成
style1
。@Heisenberg，我已经更新了答案，请检查：）
    .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">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn" class="style1">style1</button>
    <button class="click_btn" class="style2">style2</button>


$('.click_btn').on('click', function(e) {
    e.preventDefault();
    style = $(this).attr('class');  //will return style1/style2
})