jQuery-已读和未读项目

Question

I have a click handler that changes the icon and adds an active class to the item.

The function works as intended except if the item proceeds a read item, it takes two clicks to fire instead of one.

Why isn't the status changing on first click?

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

you don't need to check status and add/remove classes, just change your javascript code like this, it'll work:

$(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')
 });
});

Rest all your code remains as is. Try this

Answer 2

Because on the first click of the 4th element it will go into the first if statement. (Since you set data-status = "read")

You are missing the necessary class (activity__button--read) to visually show that the element is indeed has been read.

The script is actually triggered, you didn't see anything because it is removing nothing.

Answer 3

Initial html class declaration was wrong in last element.That means missing class of read activity__item--read and activity__button--read in last envelope. That why its open only on second click

1. For first click its added the class of to the element .Then second click applied the read status condition
2. First two element is unread .last two element are read
3. compare last two its a same status but missing read class in last one
4. Change the status or add the read class to parent

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

Answer 4

data status for the last item was "read" so we have to double click on it.i have changed it to "unread" and updated the js code too. please look at the code it works fine

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