javascript - jQuery - 已读和未读项目

Question

我有一个click处理程序，它可以更改icon并向项目添加一个active类。

该函数按预期工作，除非该项目继续进行读取项目，则需要单击两次才能触发而不是一次。

为什么第一次点击时状态没有改变？

$(".activity__button").on("click", function(e) {
  e.stopPropagation();
  e.preventDefault();
  var icon = $(this).find("svg");
  var status = $(this).attr("data-status");
  if (status === "read") {
    $(this)
      .removeClass("activity__button--read")
      .attr("data-status", "unread");
    icon.attr("data-icon", "envelope");
    $(this)
      .closest(".activity__item")
      .removeClass("activity__item--read")
      .attr("data-status", "unread");
  } else {
    $(this)
      .addClass("activity__button--read")
      .attr("data-status", "read");
    icon.attr("data-icon", "envelope-open");
    $(this)
      .closest(".activity__item")
      .addClass("activity__item--read")
      .attr("data-status", "read");
  }
});

.activity__item {
  position: relative;
  height: 100px;
  width: 300px;
  border: 1px solid whitesmoke;
  margin-top: -1px;
}

.activity__button {
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  font-size: 21px;
}

.activity__button svg {
  color: #f8971d;
}

.activity__button.activity__button--read svg {
  color: #47a877;
}

.activity__item--read {
  background: #fafafa !important;
}

<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="activity__item">
    <div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
    </div>
  </div>
  <div class="activity__item">
    <div class="activity__button" data-status="unread"><i class="fas fa-envelope"></i>
    </div>
  </div>

  <div class="activity__item activity__item--read">
    <div class="activity__button activity__button--read" data-status="read">
      <i class="fas fa-envelope-open"></i>
    </div>
  </div>
  <div class="activity__item">
    <div class="activity__button" data-status="unread">
      <i class="fas fa-envelope"></i>
    </div>
  </div>
</div>

Answer 1

您不需要检查状态并添加/删除类，只需像这样更改您的 javascript 代码，它就会起作用:

$(document).ready(function () {
 $(document).on("click", '.activity__button', function (e) {
    e.stopPropagation();
    e.preventDefault();
    $(this).toggleClass('activity__button--read');
    if ($(this).hasClass('activity__button--read'))
        $(this).attr('data-status', 'read')
    else
        $(this).attr('data-status', 'unread')
 });
});

其余所有代码保持原样。试试这个