Question

我正在使用自己的jquery代码在与单击位置相同的行中找到数据ID，以便能够删除该类并添加新类。

我有一张桌子，如下：

<tr class="unread" data-id="235'" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
        </div>
    </td>
</tr>

<tr class="unread" data-id="234'" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
        </div>
    </td>
</tr>

<tr class="unread" data-id="233'" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check" unchecked="">
        </div>
    </td>
</tr>

当我尝试这样做时：

$(".tbody_maillist").find("tr").each(function() {
    $(this).removeClass('unread');
    $(this).addClass('read');
});

它不会删除类unread，而是在与我单击该行的位置相同的行中添加名为read的新类。例如，当我单击具有数据ID 235的行时，然后删除类unread并添加新的类read。

这是完整的代码：

$(document).on('click','#mail_check', function(e) {
    e.preventDefault();
    var email_number = $(this).closest('tr').attr('data-id');
    email_number = email_number.replace("'", '');


    $("#mail_checkbox1").each(function() {
        $(".tbody_maillist").find("tr").each(function() {
        $(this).removeClass('unread');
        $(this).addClass('read');
    });
});

我要达到的目的是，当我单击一行具有数据ID 235，234，233或任何其他内容的行时，我想删除该课程并添加新课程。

能否请您举一个例子，说明如何使用名为data-id的变量搜索email_number，以便随后删除该类并添加新的类？

谢谢。

Answer 1

您的html出现了一些错误，我将其清理干净，此js将正常工作

我必须在您的'中删除data-id，在您输出表格时应将其删除。

我删除了每个输入的ID，因为它们的名称相同，并且ID必须唯一。我将每个输入的名称属性更新为不同的名称。

这些清理工作应该在生成代码时完成

$('.mail-check').on('click', function(e) {
    e.preventDefault();
    var email_number = $(this).closest('tr').attr('data-id');

    $("[data-id=" + email_number + "]").removeClass('unread').addClass('read')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="unread" data-id="235" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="" name="mail_checkbox1" class="mail-check" unchecked="">
        </div>
    </td>
</tr>

<tr class="unread" data-id="234" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="" name="mail_checkbox2" class="mail-check" unchecked="">
        </div>
    </td>
</tr>


<tr class="unread" data-id="233" data-sort="1556479689">
    <td class="inbox-small-cells">
        <div id="235'" name="mail_checkbox">
            <input type="checkbox" id="" name="mail_checkbox3" class="mail-check" unchecked="">
        </div>
    </td>
</tr>
</table>

Answer 2

您不需要jQuery。这是一个简单的普通JS解决方案，在.tbody_maillist元素上使用委托侦听器来检查单击发生时单击了什么：

document.querySelector('.tbody_maillist').addEventListener('click', function(event) {
  if (event.target.tagName === "INPUT") return; // do nothing, the checkbox was clicked
  const tr = event.target.matches('tr') ? event.target : event.target.closest('tr');
  tr.classList.toggle('unread');
  tr.classList.toggle('read');
})

.unread { background-color: #f8f8f8 }
.read { background-color: green }

<table id="foo" width="100%">
  <tbody class="tbody_maillist">
  <tr class="unread" data-id="235'" data-sort="1556479689">
    <td class="inbox-small-cells">
      <div id="235'" name="mail_checkbox">
        <input type="checkbox" id="mail_checkbox1" name="mail_checkbox1" class="mail-check">
      </div>
    </td>
  </tr>

  <tr class="unread" data-id="234'" data-sort="1556479689">
    <td class="inbox-small-cells">
      <div id="235'" name="mail_checkbox">
        <input type="checkbox" id="mail_checkbox2" name="mail_checkbox1" class="mail-check">
      </div>
    </td>
  </tr>

  <tr class="unread" data-id="233'" data-sort="1556479689">
    <td class="inbox-small-cells">
      <div id="235'" name="mail_checkbox">
        <input type="checkbox" id="mail_checkbox3" name="mail_checkbox1" class="mail-check">
      </div>
    </td>
  </tr>
  </tbody>
</table>

在表格中找到要删除和添加的类的数据ID

2 个答案: