jQuery - прочитанные и непрочитанные элементы

ProgramBox

jQuery — прочитанные и непрочитанные элементы

Post author:admin
Запись опубликована:7 мая, 2023
Post category:Вопросы по программированию

#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>

1. Последний элемент прочитан ( data-status="read" ), но не имеет соответствующего класса, почему это? (перед любым Javascript)

2. вместо .attr() вы должны использовать .data() метод data API. Это плохая практика использования CSS-селекторов, разделенных тире, таких как activity__button--read

3. проверь мой ответ, братан, это может помочь тебе, братан!!!!

4. @Jeto, я обновил код вопроса. Предполагалось, что последний элемент будет помечен как непрочитанный.

Ответ №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')
 });
});

Остальной весь ваш код остается как есть. Попробуйте это

Ответ №2:

Потому что при первом нажатии на 4-й элемент он перейдет в первый оператор if. (Поскольку вы установили data-status = «прочитано»)

Вам не хватает необходимого класса (activity__button—read), чтобы визуально показать, что элемент действительно был прочитан.

Скрипт фактически запущен, вы ничего не видели, потому что он ничего не удаляет.

Ответ №3:

Первоначальное объявление класса html было неверным в последнем элементе.Это означает отсутствие класса read activity__item--read и activity__button--read в последнем конверте. Вот почему он открывается только вторым щелчком мыши

Для первого щелчка он добавил класс к элементу .Затем второй щелчок применил условие статуса чтения
Первые два элемента — это unread .последние два элемента — это read
сравните последние два с одинаковым статусом, но в последнем отсутствует класс чтения
Измените status или добавьте класс read в 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>

Expand snippet

Ответ №4:

статус данных для последнего элемента был «прочитан», поэтому мы должны дважды щелкнуть по нему. я изменил его на «непрочитанный» и также обновил 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>

1. .activity__item--read не добавляется в .activity__item , если помечено как прочитанное

2. @KyleUnderhill в чем проблема, это не работает нормально?

3. Извините, я обновил свой вопрос. Последний элемент должен был быть помечен как непрочитанный. Также вы заметите, что непрочитанные элементы получают класс .activity__item--read

4. @KyleUnderhill проверь код прямо сейчас, братан. я добавил метод jquery для добавления класса, если он не присутствует при загрузке, на основе его состояния данных и его нормальной работы.

5. .действие__item—read { background: #fafafa!important; } По-прежнему не выполняется