Я пытаюсь изменить цвет кнопки после нажатия кнопки. Я просматривал примеры здесь и, наконец, получил изменение цвета после нажатия, однако, когда я щелкаю где-то еще (где-нибудь вне кнопки), тогда этот класс 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», кто-нибудь знает, что не так с этой частью кода?

1
Vince Mamba 15 Дек 2015 в 18:09

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>
0
Mr. Polywhirl 15 Дек 2015 в 19:38

Вы должны создать новый класс в файле 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; 
}
0
D. Armonas 15 Дек 2015 в 15:27

Несколько проблем с вашим кодом:

Ваш HTML <h3> не был закрыт

<h3>Testing</h3>

Вы попытались изменить текст для всей кнопки, а не только для текста внутри

Это изменит диапазон внутри:

$(this).find('.select-active').text('SELECTED');

(семантическое) Вы можете использовать $ вместо jQuery

$(this) // ...

Скрипка с фиксированным кодом: https://jsfiddle.net/fyha5m9g/

0
casraf 15 Дек 2015 в 15:21