0

Как сделать, чтобы менялся текст в кнопке после нажатия с 'Заказать' на 'Успешно'. И при нажатии на весь блок, текст в кнопках менялся обратно.

Знаю как сделать с помощью js, но надо сделать, чтобы в js-коде не было кириллицы

$(document).ready(function() {
  let $btn = $('button');

  $btn.click(function() {
    this.boolean = true;
    $(this).text("Успешно");
  });

  $('block').click(function(e) {
    let $this = $(this);

    if ($(e.target).closest($btn).length) {
      return;
    }
    $this.find($btn).prop("boolean", false);
    $this.find($btn).text("Заказать");
  });

});
.block {
  width: 200px;
  height: 175px;
  display: inline-block;
  filter: grayscale(0%);
  transition: 1s;
  color: steelblue;
  font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <img src="https://picsum.photos/id/223/200/150" alt="">text
  <button class="button">Button</button>
</div>
<div class="block">
  <img src="https://picsum.photos/id/222/200/150" alt="">text
  <button class="button">Button</button>
</div>
<div class="block">
  <img src="https://picsum.photos/id/225/200/150" alt="" /text <button class="button">Button</button>
</div>

2
  • через css делать - это костыль. Почему нельзя в коде кириллицу?
    – ThisMan
    Commented 22 авг. 2019 в 14:49
  • @ThisMan такое условие
    – Imp3l
    Commented 22 авг. 2019 в 14:55

3 ответа 3

3

Итить-колотить...

А чем свойство content не устраивает?

.click_me:before {
  content: 'Нажми меня';
}

.clicked:before {
  content: 'Нажато!';
}
<button class="click_me" onclick="this.className='clicked'"></button>

И всго-то делов...

1

На чистом css можно сделать, чтобы текст менялся туда и обратно при нажатии на кнопку. Менять текст ещё и при нажатии на весь блок без js едва ли получится.

.block {
  width: 200px;
  height: 175px;
  display: inline-block;
  filter: grayscale(0%);
  transition: 1s;
  color: steelblue;
  font-size: 30px;
}
input {
  display: none;
}
label {
  display: inline-block;
  width: 100px;
  border-radius: 5px;
  border: 1px solid silver;
  cursor: pointer;
  text-align: center;
}
label:after {
  content: 'заказать';
  font-size: 16px;
  color: black;
  position: relative;
  top: -5px;
}
input:checked ~ label {
  background-color: green;
}
input:checked ~ label:after {
  content: 'успешно';
  color: white;
}
<div class="block">
  <img src="https://picsum.photos/id/223/200/150" alt="">text
  <input type="checkbox" id="one" />
  <label for="one"></label>
</div>

<div class="block">
  <img src="https://picsum.photos/id/222/200/150" alt="">text
  <input type="checkbox" id="two" />
  <label for="two"></label>
</div>

0

Пока ходил посуду мыть, понял что можно сделать так

$(document).ready(function() {
  let $btn = $('button');
  let $order = $('order');
  let $suc = $('suc');

  $btn.click(function() {
    this.boolean = true;
    $(this).find($order).css("display", "none");
    $(this).find($suc).css("display", "inline");

  });

  $('block').click(function(e) {
    let $this = $(this);

    if ($(e.target).closest($btn).length) {
      return;
    }
    $this.find($btn).prop("boolean", false);
    $(this).find($order).css("display", "inline");
    $(this).find($suc).css("display", "none");
  });

});
.block {
  width: 200px;
  height: 175px;
  display: inline-block;
  filter: grayscale(0%);
  transition: 1s;
  color: steelblue;
  font-size: 30px;
}

.suc {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
  <img src="https://picsum.photos/id/223/200/150" alt="">text
  <button class="button">
    <p class="order">Заказать</p>
    <p class="suc">Успешно</p>
  </button>
</div>
<div class="block">
  <img src="https://picsum.photos/id/222/200/150" alt="">text
  <button class="button">
    <p class="order">Заказать</p>
    <p class="suc">Успешно</p>
  </button
</div>
<div class="block">
  <img src="https://picsum.photos/id/225/200/150" alt="" />text 
  <button class="button">
    <p class="order">Заказать</p>
    <p class="suc">Успешно</p>
  </button
</div>

1
  • 1
    так не работает же Commented 22 авг. 2019 в 15:02

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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