1

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

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

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

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

2
  • Клика будет всего два?
    – Cheg
    12 сен 2017 в 21:45
  • @Cheg Интересуют 2 варианта, вариант если 2 клика, и вариант если больше 2х... буду очень признателен за помощь.
    – lNaydI
    12 сен 2017 в 21:51

2 ответа 2

4

Можно заносить кол-во кликов в переменную и проверять кратность/некратность 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>

4
  • Интересное решение, никогда не думал в этом направлении при решении таких задач. (+) от меня
    – Cheg
    12 сен 2017 в 22:20
  • @Cheg, ;) [6 символов нужно...] 12 сен 2017 в 22:22
  • Но, насколько могу судить, вариант с классом несколько производительнее?
    – Cheg
    12 сен 2017 в 22:25
  • @Cheg, не думаю, по идее быстрее оперировать переменной в области видимости, чем парсить строку с классами. 12 сен 2017 в 22:29
2

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

$('#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>

2
  • спасибо за оперативность, только один вопрос, чем лучше использовать .on вместо .click?
    – lNaydI
    12 сен 2017 в 22:08
  • 1
    @lNaydI, использует меньше памяти, дает возможность отключать слушатель через $elem.off('click', func), позволяет обращаться к дочерним элементам, а не только к самому объекту (полезно для динамических дочерних элементов) 12 сен 2017 в 22:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.