3

Всем привет. Как можно изменить название кнопки(2 названия в активном состоянии и не активном), не задавая названия кнопок напрямую?

4
  • 1
    покажите кнопку хотя бы - это инпут, батон, див?
    – Kirill
    20 янв 2020 в 19:00
  • Я использую батон в списке 20 янв 2020 в 19:08
  • гут. тепер объясните, пазязя, что значит активное и не активное состояние в вашем случае? и как эти события наступают?
    – Kirill
    20 янв 2020 в 19:16
  • Возможный дубликат вопроса: Определение определённой кнопки в jquery
    – xydope
    20 янв 2020 в 19:37

3 ответа 3

6

Могу ошибаться, но мне показалось по вопросу, что вам нужно немного другое. А именно checkbox, у которого активный/неактивный состояния как раз есть.

input[type='checkbox']{display:none}
.box span{width:75px;height:30px;border:1px solid;border-radius:4px;display:block;cursor:pointer}
input[type='checkbox']:checked + span{background-color:green}
input[type='checkbox'] + span:after{content:'inactive';padding:5px;display:block;margin:0 auto;text-align:center}
input[type='checkbox']:checked + span:after{content:'active';color:white}
<label class="box">
  <input type="checkbox" name="name" />
  <span></span>
</label>

upd:

В случае с button это нереализуемо без js по причине того, что состояние active у button наступает тода, когда на кнопку нажали и заканчивается, когда её отпустили.

1
  • 1
    Изящное решение.👌 В принципе тоже самое можно сделать с button, только с разными стилями и через переключение их в js.
    – Denis640Kb
    20 янв 2020 в 20:43
5

Например с помощью css:

$('.btn').on('click', function(e) {
  e.preventDefault();

  var $this = $(this);

  if (!$this.hasClass('active')) {
    $this.addClass('active');
  } else {
    $this.removeClass('active');
  }
})
* {
  box-sizing: border-box;
}

.btn {
  width: 200px;
  height: 50px;
  line-height: 50px;
  background: orangered;
  color: #fff;
  display: block;
  border-radius: 25px;
  text-align: center;
  font-family: sans-serif;
  text-decoration: none;
}

.btn .a {
  display: none;
}

.btn .dis {
  display: block;
}

.btn.active .a {
  display: block;
}

.btn.active .dis {
  display: none;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>


<a href="#" class="btn"><span class="dis">disactive</span><span class="a">active</span></a>

5
  • Так в том и вопрос напрямую нельзя давать текст в jquery 20 янв 2020 в 19:18
  • @Александр, а в чем проблема? Опишите свою проблему подробнее и желательно с примером кода
    – SVE
    20 янв 2020 в 19:24
  • Работать должно как вы описали правильно, но надо чтобы текст кнопок задавался не в js 20 янв 2020 в 19:25
  • @Александр, обновила, стилями управляем отображением необходимого текста
    – SVE
    20 янв 2020 в 19:30
  • @HamSter ☝❤ )))
    – Denis640Kb
    20 янв 2020 в 19:34
3

Можно примерно так:

button.active:before {
  content: 'click me'
}

button:not(.active):after {
  content: 'click again'
}
<button onclick="this.classList.toggle('active')"></button>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.