我有 html 表。我想通过单击自身来更改它的 class
。
当我更改类(class)时,我想通过单击类(class)后面的按钮
来选择每个类(class)
我的尝试如下。如何通过单击按钮
来选择样式
?
谢谢
$('.click_btn').on('click', function(e) {
e.preventDefault();
style = $(this); ??
})
$('.click_td').on('click', function(e) {
e.preventDefault();
$(this).AddClass(style); ??
});
.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>
最佳答案
多次使用class
属性并不是一个好的做法,我们可以用data
属性来替换它。因此,每次单击按钮时,都会获取 data
属性值,然后将该值添加到表 td click_td
..
现在通过单击按钮完成,但这也可以通过单击 td
来替换;)
var $ = jQuery;
$('.click_btn').on('click', function(e) {
e.preventDefault();
style = $(this).data().style;
$('.click_td').removeClass('style1 style2').addClass(style)
})
.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" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>
这是第二种方法,这里样式被复制到一个变量,然后在单击td
时应用于td
var $ = jQuery;
var style ='';
$('.click_btn').on('click', function(e) {
e.preventDefault();
style = $(this).data().style;
})
$('.click_td').on('click', function(){
$(this).removeClass('style1 style2').addClass(style)
})
.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" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>
关于javascript - 如何通过单击 html 表格中的按钮来设置类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60389822/