Удалить активное состояние кнопок «Мне нравится», если нажата кнопка «Мне нравится», для того же комментария - PullRequest
Новая
       0

Удалить активное состояние кнопок «Мне нравится», если нажата кнопка «Мне нравится», для того же комментария

0 голосов
/ 12 февраля 2020

Пожалуйста, посетите здесь, чтобы увидеть в реальном времени https://ibnul.neocities.org/_temporary/au2pr4/like-dis-icon-active-effect.html

Здесь у меня есть несколько разделов комментариев с кнопками «Нравится», «Не нравится» и «Ответить» для каждого комментария.

Я добавил имя класса с именем like-dis-icon-active для значков «Мне не нравится», чтобы сделать его активным, и удалить имя класса, чтобы сделать его неактивным.

При нажатии кнопка «Нравится и не нравится» должна быть активной, а при повторном нажатии - неактивной. .

Когда активна кнопка «Мне нравится», а затем пользователь нажимает кнопку «Мне не нравится», кнопка «Мне нравится» должна быть неактивной, а кнопка «Мне не нравится» должна быть активной для того же комментария, но кнопка «Мне нравится» в другом разделе комментариев должна оставаться неизменной. И сделайте то же самое с кнопками неприязни.

Пожалуйста, не используйте никакие имена, потому что мне нужно несколько раз скопировать и вставить этот комментарий на страницу и показать его в чистом виде JavaScript. 

var like_btns = document.querySelectorAll('.other-com-likeicon');
var dislike_btns = document.querySelectorAll('.other-com-dislikeicon');

like_btns.forEach(btn => {
  btn.addEventListener('click', likeBtnsActive);
});

function likeBtnsActive(e) {
  var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  var like_icon = like_icon_con.querySelector('.other-com-likeicon');
  like_icon.classList.toggle('like-dis-icon-active');
}


dislike_btns.forEach(btn => {
  btn.addEventListener('click', dislikeBtnsActive);
});

function dislikeBtnsActive(e) {
  var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon');
  dislike_icon.classList.toggle('like-dis-icon-active');
}
    * {
      margin: 0px;
      font-family: 'Segoe UI', sans-serif;
    }

    .other-com-namcombtn-con {
      padding: 20px;
    }

    .other-comment-text {
      font-size: 14px;
      line-height: 1.5;
      color: gray;
      padding: 5px 0px 5px 0px;
    }

    .ohter-com-likedisrepl-con {
      user-select: none;
      display: flex;
      align-items: center;
      padding: 2px 0px 2px 0px;
    }

    .other-com-likeicon {
      width: 12px;
      height: 12px;
      padding: 2px 3px 2px 1px;
      margin: 2px 7px 2px 0px;
      opacity: 0.6;
    }

    .other-com-likeicon:hover {
      opacity: 1;
    }

    .other-com-likeicon:focus {
      outline: none;
    }

    .other-com-likecount {
      font-size: 13px;
      color: gray;
    }

    .other-com-dislikeicon {
      width: 12px;
      height: 12px;
      padding: 2px 3px 2px 3px;
      margin: 2px 7px 2px 25px;
      opacity: 0.6;
    }

    .other-com-dislikeicon:hover {
      opacity: 1;
    }

    .other-com-dislikeicon:focus {
      outline: none;
    }

    .other-com-dislikecount {
      font-size: 13px;
      color: gray;
    }

    .other-com-replybtn {
      font-size: 13px;
      color: gray;
      padding: 4px 12px;
      margin: 0px 0px 0px 20px;
    }

    .other-com-replybtn:hover {
      background-color: rgb(241, 241, 241);
    }

    .like-dis-icon-active {
      opacity: 1;
    }
<!DOCTYPE html>
<html lang='en-US'>

<head>
  <title>like-dis-icon-active-effect</title>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<!-- start -->
<body>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>3</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium eaque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>1</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omniserror sit voluptatem accusantium eaque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>2</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>



</body>

</html>
<!-- end -->

1 Ответ

1 голос
/ 12 февраля 2020

Вам просто нужно удалить активное состояние кнопки «Мне нравится», когда вы пытаетесь активировать кнопку «Мне не нравится» комментария. 

var like_btns = document.querySelectorAll('.other-com-likeicon');
var dislike_btns = document.querySelectorAll('.other-com-dislikeicon');

like_btns.forEach(btn => {
  btn.addEventListener('click', likeBtnsActive);
});

function likeBtnsActive(e) {
 var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon');
  dislike_icon.classList.remove('like-dis-icon-active');
  

  var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  
 
  
  var like_icon = like_icon_con.querySelector('.other-com-likeicon');
  like_icon.classList.toggle('like-dis-icon-active');
}


dislike_btns.forEach(btn => {
  btn.addEventListener('click', dislikeBtnsActive);
});

function dislikeBtnsActive(e) {

var like_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  
 
  
  var like_icon = like_icon_con.querySelector('.other-com-likeicon');
  like_icon.classList.remove('like-dis-icon-active');
  
  var dislike_icon_con = e.target.closest('.ohter-com-likedisrepl-con');
  var dislike_icon = dislike_icon_con.querySelector('.other-com-dislikeicon');
  dislike_icon.classList.toggle('like-dis-icon-active');
}
* {
      margin: 0px;
      font-family: 'Segoe UI', sans-serif;
    }

    .other-com-namcombtn-con {
      padding: 20px;
    }

    .other-comment-text {
      font-size: 14px;
      line-height: 1.5;
      color: gray;
      padding: 5px 0px 5px 0px;
    }

    .ohter-com-likedisrepl-con {
      user-select: none;
      display: flex;
      align-items: center;
      padding: 2px 0px 2px 0px;
    }

    .other-com-likeicon {
      width: 12px;
      height: 12px;
      padding: 2px 3px 2px 1px;
      margin: 2px 7px 2px 0px;
      opacity: 0.6;
    }

    .other-com-likeicon:hover {
      opacity: 1;
    }

    .other-com-likeicon:focus {
      outline: none;
    }

    .other-com-likecount {
      font-size: 13px;
      color: gray;
    }

    .other-com-dislikeicon {
      width: 12px;
      height: 12px;
      padding: 2px 3px 2px 3px;
      margin: 2px 7px 2px 25px;
      opacity: 0.6;
    }

    .other-com-dislikeicon:hover {
      opacity: 1;
    }

    .other-com-dislikeicon:focus {
      outline: none;
    }

    .other-com-dislikecount {
      font-size: 13px;
      color: gray;
    }

    .other-com-replybtn {
      font-size: 13px;
      color: gray;
      padding: 4px 12px;
      margin: 0px 0px 0px 20px;
    }

    .other-com-replybtn:hover {
      background-color: rgb(241, 241, 241);
    }

    .like-dis-icon-active {
      opacity: 1;
    }
<!DOCTYPE html>
<html lang='en-US'>

<head>
  <title>like-dis-icon-active-effect</title>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>

<!-- start -->
<body>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>3</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium eaque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>1</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>

<div class='other-com-namcombtn-con'>
  <p class='other-comment-text'>Sed ut perspiciatis unde omniserror sit voluptatem accusantium eaque.</p>
  <div class='other-com-likedisbtnscom-con'>
    <div class='ohter-com-likedisrepl-con'>
      <img class='other-com-likeicon' tabindex='0' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-up-icon.svg' alt='' title='Like'>
      <p class='other-com-likecount'>24</p>
      <img class='other-com-dislikeicon' tabindex='1' src='https://ibnul.neocities.org/_temporary/au2pr4/thumbs-down-icon.svg' alt='' title='Dislike'>
      <p class='other-com-dislikecount'>2</p>
      <p class='other-com-replybtn'>REPLY</p>
    </div>
  </div>
</div>



</body>

</html>
<!-- end -->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...