Question

在第一个功能中，通过单击.activity__button将项目标记为已读或未读。下一个功能是将所有项目的状态更改为read。

为什么函数不遍历每个item和button？

var button = $(".activity__button");
var item = $(".activity__item");

当我按button将状态更改为read时，什么也没发生。此外，如何处理button的第二次单击以将所有内容都更改回unread？

$(".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");
  }
});
$(".section").on("click", ".mark", function(e) {
  e.stopPropagation();
  e.preventDefault();
  var button = $(".activity__button");
  var item = $(".activity__item");
  var icon = button.find("svg");
  var status = button.attr("data-status");
  if (status === "unread") {
    button.addClass("activity__button--read").attr("data-status", "read");
    icon.attr("data-icon", "envelope-open");
    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;
  padding: 1rem;
  font-size: 21px;
}

.activity__button svg {
  color: #f8971d;
}

.activity__button.activity__button--read svg {
  color: #47a877;
}

.activity__item--read {
  background: #fafafa !important;
}

button {
  padding: 12px;
  margin: 1rem;
}

<script src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class "section">
  <button class="mark">Mark as Read</button>
  <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>
</div>

Answer 1

工作示例（与其他课程一起使用）

var open = 'fas fa-envelope-open';
var close = 'fas fa-envelope';

$(".activity__button").off().on('click', function() {
    var status = $(this).data('status');
    if( status == 'unread' ) {
        $(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
        $(this).parent().addClass('activity__item--read');
    } else {
        $(this).data('status', 'unread').empty().html('<i class="' + close + '"></i>').removeClass('activity__button--read');
        $(this).parent().removeClass('activity__item--read');
    }
});

$('.mark').off().on('click', function() {
    $(".activity__button").each( function() {
    $(this).data('status', 'read').empty().html('<i class="' + open + '"></i>').addClass('activity__button--read');
    $(this).parent().addClass('activity__item--read');
  });
});

请参阅此处： https://jsfiddle.net/8yk9a7rn/

更改所有元素的数据状态

1 个答案: