Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.08.2019, 12:32
Интересующийся
Отправить личное сообщение для ekad Посмотреть профиль Найти все сообщения от ekad
 
Регистрация: 17.04.2013
Сообщений: 21

Как при нажатии на лайк прибавить еденицу, при нажатии на диз отнять?
Есть кнопки лайк и дизлайк и между ними цифра.
Нужно при нажатии на лайк прибавить один, и лайк сделать активным.
при нажатии сразу на дизлайк от цифры отнять два, и лайк сделать не активным, а дизлайк активным. Если сразу нажать дизлайк, то дизлайк становится активным и отнимается единица от цифры. Если при открытии сразу лайк например активный, то пи повторном нажатии лайк сделать не активным и отнять единицу.
<style>
.one path {
  fill: #909090;
}
.one .active path {
  fill: #f00;
}
</style>
<div class="one">
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;">
    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"></path>
  </svg>
  
  <span class="count">10</span>
  
  <svg viewBox="0 0 24 24" style="width:21px;vertical-align: middle;margin-right: 5px;">
    <path d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v1.91l.01.01L1 14c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"></path>
  </svg>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 16.08.2019, 12:46
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 10,645

Добавить SVG data-num="1", для дизлайк -1.
[...document.querySelectorAll('div.one svg')].forEach((button) => {
  button.addEventListener('click', function() {
    let o = document.querySelector('span.count');
    o.textContent = +o.textContent + +this.dataset.num
  });
})

Но видимо нужно проверять и крайние значения?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как при нажатии на картинку открыть текст и картинку? silatal jQuery 1 22.11.2018 06:22
Как сделать так, чтобы JS при нажатии на кнопку не выполняла запрос со страницы. JSProgrammer Элементы интерфейса 3 18.05.2010 19:18
При нажатии на ссылку браузер запоминает как переход на др страничку mff AJAX и COMET 13 17.02.2010 20:46
Как очистить textarea при нажатии на него soniclord Общие вопросы Javascript 12 11.01.2010 07:12
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 06:55