Question

我有html表。我想通过单击自身来更改其class。

当我更改课程时，我想通过单击课程后面的button来选择每个课程

我的尝试如下。如何通过单击style来提取button？

谢谢

    $('.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>

Answer 1

您不应在元素中多次具有相同的属性，如果这样做，则第一个属性之后的属性将被静默忽略。尽管最好的方法是在此处使用 data-* 属性。另外，AddClass中有一个错字，应该是addClass。

您可以尝试以下方式：

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

$('.click_td').on('click', function(e) {
  $(this).removeClass('style1, style2');
  e.preventDefault();
  $(this).addClass(style);  
  style = '';
});

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

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

<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>

Answer 2

多次使用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>

Answer 3

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

Answer 4

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

let prevStyle = '';
let style = '';

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

$('.click_td').on('click', function(e) {
  e.preventDefault();
  $(this).removeClass(prevStyle);
  $(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 style1">style1</button>
<button class="click_btn style2">style2</button>

Answer 5

$(()=>{
var style = $(this).attr('class');   
$('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this).attr('class');   
    })

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      console.log(style);
      $(this).attr('class','');   
      $(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 style1">style1</button>
    <button class="click_btn style2">style2</button>

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

5 个答案: