Я пытаюсь изменить цвет кнопки после нажатия кнопки. Я просматривал примеры здесь и, наконец, получил изменение цвета после нажатия, однако, когда я щелкаю где-то еще (где-нибудь вне кнопки), тогда этот класс CSS исчезает. Эти кнопки находятся внутри формы, поэтому я хотел, чтобы они имели активное состояние css до отправки формы.
Вот что у меня есть на данный момент:
jQuery('.choose-school').click(function() {
jQuery(this).toggleClass('active');
if (jQuery(this).hasClass('active')) {
jQuery(this).text('SELECTED');
} else {
jQuery(this).text('SELECT');
}
});.choose-school.active {
background-color: #eeffd4;
}
.choose-school:active {
background-color: #eeffd4;
}
.choose-school:focus {
background-color: #eeffd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="choose-school">
<h3>Testing
<span class="select-active">SELECT</span>
</button>Я пытался использовать такие вещи, как: active и: focus, чтобы посмотреть, поможет ли это, но это не помогло. В JQuery я также пытаюсь изменить это изменение текста диапазона с «SELECT» на «SELECTED», кто-нибудь знает, что не так с этой частью кода?
3 ответа
Вам нужно использовать $.html() вместо $.text(). Заменитель текста удалит все теги и сохранит только текст.
Самый простой способ - получить HTML в виде строки, заменить его, а затем установить его. Смотрите пример ниже:
jQuery('.choose-school').click(function() {
jQuery(this).toggleClass('active');
if (jQuery(this).hasClass('active')) {
jQuery(this).html(jQuery(this).html().replace('SELECT', 'SELECTED'));
} else {
jQuery(this).html(jQuery(this).html().replace('SELECTED', 'SELECT'));
}
});.choose-school.active {
background-color: #eeffd4;
}
.choose-school:active {
background-color: #eeffd4;
}
.choose-school:focus {
background-color: #eeffd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="choose-school">
<h3>Testing
<span class="select-active">SELECT</span>
</h3>
</button>Лучший способ - заменить текст внутри span:
jQuery('.choose-school').click(function() {
jQuery(this).toggleClass('active');
if (jQuery(this).hasClass('active')) {
jQuery(this).find('.select-active').html('SELECTED');
} else {
jQuery(this).find('.select-active').html('SELECT');
}
});.choose-school.active {
background-color: #eeffd4;
}
.choose-school:active {
background-color: #eeffd4;
}
.choose-school:focus {
background-color: #eeffd4;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" class="choose-school">
<h3>Testing
<span class="select-active">SELECT</span>
</h3>
</button>Вы должны создать новый класс в файле CSS и применить его, когда вы нажимаете кнопку. Не используйте фокус на кнопке, там это бесполезно. Делай так:
<script>
jQuery('.choose-school').click(function(){
if(jQuery(this).hasClass('active')){
jQuery(this).removeClass('active');
jQuery(this).text('SELECTED');
}else{
jQuery(this).addClass('active');
jQuery(this).text('SELECT');
}
});
</script>
Файл css
.choose-school.active {
background-color: #eeffd4;
}
Несколько проблем с вашим кодом:
Ваш HTML <h3> не был закрыт
<h3>Testing</h3>
Вы попытались изменить текст для всей кнопки, а не только для текста внутри
Это изменит диапазон внутри:
$(this).find('.select-active').text('SELECTED');
(семантическое) Вы можете использовать $ вместо jQuery
$(this) // ...
Скрипка с фиксированным кодом: https://jsfiddle.net/fyha5m9g/
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español