Второй клик на тот же элемент

371
14 сентября 2017, 16:55

Есть, к примеру, простой параграф с текстом, как я могу менять цвет текста нажимая на него мышкой?

Пытался как то через .click сделать но не могу вернуть цвет назад после того как один раз уже нажал на элемент. Раньше за такой функционал отвечал метод .toggle, но не могу найти информацию о том как теперь решается подобный вопрос через jQuery.

П.С. Логика как в коде ниже

$('#something').click( 
    function() { 
        // First click 
    }, 
    function() { 
        // Second click 
    } 
);

Answer 1

Определить был ли клик на элементе можно проверкой на наличие класса, который вы будет добавлять при первом клике и убирать при втором:

$('#something').on('click', function() { 
  if (!$(this).hasClass('clicked')) { // если класса нет 
    $(this).addClass('clicked'); // добавляем класс 
    console.log('First click'); // код для первого клика 
  } else { // если есть 
    $(this).removeClass('clicked'); // убираем класс 
    console.log('Second click'); // код для второго клика 
  } 
});
.text.clicked { 
  color: #f00; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="something" class="text"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</div>

Answer 2

Можно заносить кол-во кликов в переменную и проверять кратность/некратность 2ум (numOfClicks % 2 !== 0):

let numOfClicks = 0; 
const $elem = $('#something'); 
 
$elem.on('click', () => { 
  ++numOfClicks; 
  if(numOfClicks % 2 !== 0) console.log('Odd Click!'); 
  else console.log('Even Click!'); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="something"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>

Для вашей задачи:

let numOfClicks = 0; 
const $elem = $('#something'); 
 
$elem.on('click', () => { 
  ++numOfClicks; 
  $elem.toggleClass('odd-click', numOfClicks % 2 !== 0); 
});
#something.odd-click { color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="something"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
</p>

READ ALSO
Menu WordPress (SlideToggle)

Menu WordPress (SlideToggle)

Адаптивное меню открывается по клику jquery методом SlideToggleПроблема при переносе меню на WordPress

258
Заполнить фон изображением спрайта

Заполнить фон изображением спрайта

Как в css можно заполнить фон выбранным из общего спрайта изображением?

193
В бд mysql есть куча символов \u00AD

В бд mysql есть куча символов \u00AD

В БД MySQL есть куча скрытых символов

238
Не выполняется большой запрос в скрипте

Не выполняется большой запрос в скрипте

Запрос большой на Select, в workbench'е за 1500 сек отпрабатывает, через скрипт, используя mysqli, несколько секунд работает и результата нет, ошибок тоже...

269