Использование jQuery для изменения цвета фона при нажатии

Я новичок в jQuery, и я прочитал темы по этой теме, но у меня возникли проблемы с пониманием логики и после повторного написания кода, я все еще не могу получить это работать.Использование jQuery для изменения цвета фона при нажатии

У меня есть две кнопки, и я хотел бы, чтобы каждый из них менял цвет фона и цвет текста при нажатии. Вот ссылка на мой jsfiddle

Любая обратная связь или совет будут очень признательны. Благодаря!

jQuery(document).ready(function() { 
    $("#footer").on("click", "#purple', function() { 
     $(this).css("background-color", "#9683ec"); 
     $(this).css("color", "#2d2746"); 
    }); 

    $("footer").on("click", "#blue', function() { 
     $(this).css("background-color", "#00bfff"); 
     $(this).css("color", "#002633"); 
    }); 
});

источник

2016-02-21 Allison H.

Вы не ссылки на JQuery в вашей скрипке. – Yass

Спасибо за отзыв. Я не уверен, понимаю ли вы, что вы имеете в виду. Можете ли вы рассказать мне больше? –

Вы уверены, что вы правильно связали jquery –

Fiddle Demo

click события ищет потомок с id из #purple или #blue и в обоих случаях нет ни одного.

Из документации JQuery для функции on:

Когда селектор предусмотрен, обработчик события называют делегированы. Обработчик не вызывается, когда событие происходит непосредственно на связанный элемент, но только для потомков (внутренних элементов), которые соответствуют селектору. jQuery создает пузырьки события от события до к элементу, где прикреплен обработчик (т. е. самый внутренний до внешний элемент) и запускает обработчик для любых элементов вдоль этого пути , соответствующего селектору.

Обертывание текст в кнопках с span и установив значение на пролетах id вместо этого будет работать.

Кроме того, похоже, что вы не нацеливаете body на событие click, так что background-color не изменится по назначению.

HTML

<footer> 
    <button><span id="purple">Purple</span></button> 
    <button><span id="blue">Blue</span></button> 
    <p>&copy;Allison Harris 2016</p> 
</footer>

JQuery:

jQuery(document).ready(function() { 
    $("button").on("click", "#purple", function() { 
    $('body').css("background-color", "#9683ec"); 
    }); 

    $("button").on("click", "#blue", function() { 
    $('body').css("background-color", "#00bfff"); 
    }); 
});

источник

2016-02-21 16:22:27 Yass

Большое вам спасибо! Мне удалось заставить мой код работать. Вот обновленная ссылка: https://jsfiddle.net/allisoncodes/zdpbx518/18/ –

@AllisonH. Пожалуйста. Код в вашей скрипке изменяет цвет кнопки, а не фон. – Yass

это то, как вы можете сделать это it.try

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <title>hover</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <style type="text/css"> 
 
     body{ 
 
     margin:0; 
 
     padding:0; 
 
     } 
 

 
    div.myclass{ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: orange; 
 
    } 
 
    
 
    #mybotton{ 
 
    background-color: orange; 
 
    color: black; 
 
    } 
 

 
    </style> 
 

 
    </head> 
 
    <body> 
 

 
    <div class="myclass"></div> 
 
    <br/> 
 
    <button id="mybotton">my button</button> 
 

 
    <script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
    $(".myclass").click(function(){ 
 
     $(this).css({"background-color":"red"}); 
 
    }); 
 

 
    $("#mybotton").click(function(){ 
 
     $(this).css({"color":"white", "background-color":"red"}); 
 
    }); 
 

 
    }); 
 
    </script> 
 

 
    </body> 
 

 

 

 

 
    </html>

источник

2016-02-21 16:02:30

У вас есть опечатка в "#purple' и "#blue' с использованием одного qoute и двойные кавычки в той же строке, вы следует выбрать один из них:

$("#footer").on("click", "#purple", function() { 
//OR 
$("#footer").on("click", '#purple', function() {

Также вы можете прикрепить несколько CSS в то же время с помощью:

$(this).css({ "background-color": "#9683ec", "color": "#2d2746" })

Вместо:

$(this).css("background-color", "#9683ec"); 
$(this).css("color", "#2d2746");

Наконец вы пропустите ID селектора знак # в:

$("footer").on("click", "#blue", function() { 
__^

Полный код:

jQuery(document).ready(function() { 
    $("#footer").on("click", "#purple", function() { 
     $(this).css({ "background-color": "#9683ec", "color": "#2d2746" }) 
    }); 

    $("#footer").on("click", "#blue", function() { 
     $(this).css({ "background-color": "#00bfff", "color": "#002633" }) 
    }); 
});

Надеюсь, это поможет.

источник

2016-02-21 16:02:41

«# footer' in должен быть нормальным« нижним колонтитулом », я думаю. – LarsW

@LarsW, что в зависимости от кода HTML. –

@ ZakariaAcharki Конечно, но поскольку HTML-код нижнего колонтитула не имеет идентификатора, и вы его исправили, как если бы это было, я хотел уточнить его. – LarsW

Попробуйте это решение

jQuery(document).ready(function() { 
 
    
 
    $("#purple").click(function() { 
 
     $(this).css("background-color", "#9683ec"); 
 
    }); 
 
    $("#blue").click(function() { 
 
     $(this).css("background-color", "#00bfff"); 
 
    }); 
 
});

body { 
 
\t font-family: sans-serif; 
 
\t font-size: 1.2em; 
 
    color: #091232; 
 
\t background-color: #00ced1; 
 
    text-align: center; 
 
} 
 

 
button { 
 
    border-radius: 20%; 
 
\t background-color: #ffff33; 
 
    font-color: #000000; 
 
    font-size: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<title>#bothcats</title> 
 

 
<body> 
 
    <h1>Toph and Oscar</h1> 
 
    <div id="container"> 
 
    <h2>#bothcats</h2> 
 
    <img src="http://i.imgur.com/rEn4Ze8.png" style="max-width:80%"> 
 
    <p>Toph and Oscar are the ultimate duo.</p> 
 
    <h2>You decide</h2> 
 
    <p>Would you like to see them on blue or purple? Make your choice below.</p> 
 
    </div> 
 

 
</body> 
 
<footer> 
 
    <button id="purple">Purple</button> 
 
    <button id="blue">Blue</button> 
 
    <p>&copy;Allison Harris 2016</p> 
 
</footer>

источник

2016-02-21 16:10:40

Спасибо, это было полезно! Я теперь понимаю, что, возможно, я не должен использовать «это», потому что на самом деле я хочу изменить цвет фона и цвет текста ** всей страницы ** при щелчке. Не могли бы вы помочь мне с логикой этого? –

В этом случае вы можете использовать $ ("body") вместо $ (this). –

Gotcha, спасибо огромное! –

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
     </script> 
     <style> 
     body 
     { 
      text-align: center; 
     } 
     div 
     { 
      margin: auto; 
      width: 200px; 
      height: 100px; 
      background-color: #ccc; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="myclass"></div> 
     <br /> 
     <button id="purple">Purple</button> 
     <button id="blue">Blue</button> 

     <script> 
      $(document).ready(function() 
      { 
       $("#purple").on('click', function() 
       { 
        $('div').css("background-color", "purple"); 
       }); 
       $("#blue").on('click', function() 
       { 
        $('div').css("background-color", "blue"); 
       }); 
      }); 
     </script> 
    </body> 
</html>

источник

2016-02-21 16:14:22

Использование jQuery для изменения цвета фона при нажатии

ответ

Смежные вопросы