Блог

Главная - Вопросы по программированию - Измените цвет кнопки, а затем измените его обратно с помощью JS

Измените цвет кнопки, а затем измените его обратно с помощью JS

#javascript #jquery

Вопрос:

У меня есть следующее:

 <div id="ext">01</div>

Как добавить кнопку, которая меняет цвет div на какой-то цвет при нажатии и снова меняет его при повторном нажатии?

Комментарии:

1. Что вы пробовали, а что не сработало?

2. Для справки, полезный формат или шаблон для задавания вопросов-это размещение вашего контента в следующих разделах: Желаемое поведение, Фактическое поведение, то, что я пробовал (включая примеры кода и ссылки на исследования, которые вы провели по этому вопросу). Часто вы обнаружите, что использование этого подхода решает вопрос до того, как вы его опубликуете! Удачи вам в вашем программном путешествии!

Ответ №1:

Вы можете добавить прослушиватель click событий на кнопку, которая переключает класс, применяющий цвет:

 $(btn).on('click', function(){ $(ext).toggleClass('with-color') }) 
 .with-color{
  color:red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>

Если вы предпочитаете решение без jQuery:

 btn.addEventListener('click', function(){
  ext.classList.toggle('with-color');
}) 
 .with-color{
  color:red;
} 
 <div id="ext">01</div>
<button id="btn">Toggle Color</button>

Если вы хотите, чтобы кнопка могла переключать класс один раз, вы можете сохранить время нажатия кнопки и прекратить переключение, если оно было нажато более двух раз:

 var count = 0;
$(btn).on('click', function() {
  if (count != 2) $(ext).toggleClass('with-color'), count  
}) 
 .with-color {
  color: red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>

Если у вас несколько номеров, просто нажмите ближайшую предыдущую div кнопку «Вкл».:

 $(btn).on('click', function(){ $(this).prev('div').first().toggleClass('with-color') }) 
 .with-color{
  color:red;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>
<div id="ext">02</div>
<button id="btn">Toggle Color</button>
<div id="ext">03</div>
<button id="btn">Toggle Color</button>

Ответ №2:

или для полного случая здесь с jquery

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
    $("#ext").toggleClass("yourColor");
  });
});
</script>
<style>
    .yourColor{
        background-color: green;
        color:blue;
    }
</style>
</head>
<body>
    <div id="ext" class="">01</div>
    <button id="btn">toggle</button>
</body>
</html>

Комментарии:

1. Это работает, большое вам спасибо. Если я сделаю несколько чисел с одной и той же функцией, все они изменятся вместе, есть ли способ с помощью одной функции изменить только один div?

2. @Guilherme Я обновил свой ответ, чтобы добавить поддержку нескольких div s.

3. это действительно зависит от того, где находится div. Если это прямо до или сразу после, то прекрасно, вы можете использовать функцию prev (). В противном случае, если вы хотите использовать одну и ту же функцию для всех кнопок, вам понадобится атрибут метаданных, например <класс кнопки=»btn» номер=»1″>и соответственно изменить идентификатор divs, т. е…. <класс кнопки=»btn» номер=»1″><идентификатор div=»ext1″ класс=»»>01<идентификатор div=»ext1″ класс=»»></div> . Затем измените функцию на $(«.btn»).нажмите(функция(){ $(«#ext» $(это).attr(«число»)).Класс переключения(«Ваш цвет»); });

Метки: ,