Задать вопрос

fluki

Комментарии

  • Есть 4 псевдо-счетчика на странице. Как их рассинхронизировать?

    @fluki Автор вопроса
    Спасибо за подробный ответ по кнопке.
    Не дает покоя один вопрос: как сделать адаптивный блок div, состоящий из картинки + кнопки:
    чтобы на десктопе было 4 колонки таких блоков, как сейчас прописано в коде,
    а на планшетах: 2 колонки по 2 блока в каждой,
    типа div div
    div div
    на мобильных: 1 колонка во всю ширину, то есть типа
    div
    div
    div
    div
    ?
    Вот существующий код:
    <div class="container" >
      <div style="float: left; width: 25%;">
      <img src="https://ссылка-на-картинку.jpg" alt="Описание картинки" />
      <button class="like js-counter" type="button"> <i class="fa fa-heart"></i> 110</button></div>
 
   <div style="float: left; width: 25%;"><img src="https://ссылка-на-картинку.jpg" alt="Описание картинки" />
   <button class="like js-counter" type="button"> <i class="fa fa-heart"></i> 193</button></div>
   
     <div style="float: left; width: 25%;"><img src="https://ссылка-на-картинку.jpg" alt="Описание картинки" />
     <button class="like js-counter" type="button" > <i class="fa fa-heart"></i> 108</button></div>
     
       <div style="float: left; width: 25%;"><img src="https://ссылка-на-картинку.jpg" alt="Описание картинки" />
       <button class="like js-counter" type="button"> <i class="fa fa-heart"></i> 151</button></div></div>

<script>
function Counter (initialValue) {
 return {
 	val: Number(initialValue || 0),
  increment: true,
 }
}

function onCounterClick (evt) {
 var elem = evt.target
 elem.jsCounter.val = elem.jsCounter.increment ? ++elem.jsCounter.val : --elem.jsCounter.val
 elem.jsCounter.increment = !elem.jsCounter.increment
 elem.textContent = elem.jsCounter.val
}

document.querySelectorAll('.js-counter').forEach(function(elem){
	elem.jsCounter = new Counter(elem.textContent)
	elem.addEventListener('click', onCounterClick)
})
 </script>
    Написано

  • Есть 4 псевдо-счетчика на странице. Как их рассинхронизировать?

    @fluki Автор вопроса
    Вадим, а вы беретесь за работу по проверке/ исправлению ошибок в коде? в проблемах со скоростью загрузки сайта? Рассматриваю вариант работы с вами. Напишите, если заинтересует. Если нет - закрываем тему "решением"
    Написано