jQuery-已读和未读项目

时间：2019-03-26 03:44:13

标签： javascript jquery

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

该功能按预期工作，除了如果该项目继续执行read项目，它需要两次单击触发，而不是一次。

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

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

4 个答案:

答案 0 :(得分：2)

您无需检查状态并添加/删除类，只需像这样更改您的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')
 });
});

将所有代码保留为原样。试试这个

答案 1 :(得分：0)

因为第一次单击第四个元素，它将进入第一个if语句。 （因为您设置了data-status =“ read”）

您缺少必要的类（activity__button--read）以直观地显示该元素确实已被读取。

该脚本实际上已触发，您什么也没看到，因为它什么也没删除。

答案 2 :(得分：0)

最后一个元素中的初始html类声明错误。这意味着最后一个信封中缺少读activity__item--read和activity__button--read的类。那就是为什么它仅在第二次点击时打开

  1. 第一次单击将其类添加到元素。然后第二次应用读取状态条件
  2. 前两个元素是unread。后两个元素是read
  3. 比较最后两个的状态相同，但最后一个缺少读取类
  4. 更改status或将读取的类添加到父类

$('.activity__button').on("click", function(e) {
  e.stopPropagation();
  e.preventDefault();

  var status = $(this).attr("data-status");
  if (status === "read") {
    $(this)
      .removeClass("activity__button--read")
      .attr("data-status", "unread");
    $(this)
      .closest(".activity__item")
      .removeClass("activity__item--read")
      .attr("data-status", "unread");
  } else {
    $(this)
      .addClass("activity__button--read")
      .attr("data-status", "read");
    $(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 .fas:before {
  color: #f8971d;
}

.activity__button.activity__button--read .fas:before {
  content: "\f2b6";
  color: #47a877;
}

.activity__item--read {
  background: #fafafa !important;
}
<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"></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"></i>
    </div>
  </div>
</div>

答案 3 :(得分：0)

最后一项的

数据状态为“已读”，因此我们必须双击它。我已将其更改为“未读”并更新了js代码。请看一下能正常工作的代码

$('.activity__button').on("click", function(e) {
  e.stopPropagation();
  e.preventDefault();
        $(this).toggleClass('activity__button--read ');
        $(this).attr('data-status', 'unread')
        $(this).parent().toggleClass('activity__item--read');
});

$('div[data-status="read"]').each(function(){ 
  $(this).addClass('activity__item--read');
})
$('div[data-status="unread"]').each(function(){ 
$(this).removeClass('activity__item--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 .fas:before {
  color: #f8971d;
}

.activity__button.activity__button--read .fas:before {
  content: "\f2b6";
  color: #47a877;
}

.activity__item--read {
  background: #fafafa !important;
}
<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"></i>
    </div>
  </div>
  <div class="activity__item">
    <div class="activity__button" data-status="read">
      <i class="fas fa-envelope"></i>
    </div>
  </div>
</div>

相关问题
最新问题