Стилизация html-содержимого с помощью метода jquery css ("property", "style") - PullRequest
Новая
       1

Стилизация html-содержимого с помощью метода jquery css ("property", "style")

0 голосов
/ 14 октября 2019

Я только начал Jquery, и я застрял на этом. Я хочу изменить цвет этого текста при нажатии кнопки. Вот код, 

$(document).ready(function(){
	$('input[type="button"]').click(function(){
		$("h3").css('background-color','red');
	});
});
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

<h3>Click to change me</h3>
<input type="button" value="click Me"/>

Пожалуйста, подскажите, где я не прав.

Редактировать: Я только что разделил тип jquery src и jqueryв другой строке и код начал работать

Ответы [ 3 ]

1 голос
/ 14 октября 2019

Кажется, проблема в этой строке $("button").click, это не то, как вы выбираете кнопку, используйте эту $(":button") или $('input[type=button]'). Попробуйте код ниже 

<head>

<script language="javascript" type="text/javascript" src="jquery-3.4.1.min.js">

$(document).ready(function(){
    $("input[type=button]").click(function(){
        $("h3").css('background-color','red');


    })  ;
});

</script>
</head>

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

1 голос
/ 14 октября 2019

У вас нет элемента кнопки. При использовании "input[type=button]" в качестве селектора ваш код работает нормально. Однако вы, вероятно, захотите указать селекторы немного больше по классу или по идентификатору.

Также изменено свойство background-color css на свойство color для изменения фактического текста вместо фона.

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

$("#MyColorChangingButton").on('click', function() {
  $("#ColorChangingElement").css('color', 'red');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 id="ColorChangingElement">Click to change me</h3>
<input id="MyColorChangingButton" type="button" value="click Me" />
0 голосов
/ 14 октября 2019

Вы можете сделать это так. Вы задаете цвет фона и неправильно выбираете кнопку. 

$(document).ready(function() { 
    $('#buttonId').on('click', function() { 
       $('h3').css('color', 'red');
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Click to change me</h3>
<input type="button" value="click Me" id="buttonId"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...