1

$('#typeBold').click(function() {
  $('#textBlock').css('fontWeight', '900');
});
<button id="typeBold" class="btn btn-light left">Edit</button>
<div id="textBlock" class="">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

</div>

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

3 ответа 3

2

$('#typeBold').click(function() {
  $('#textBlock').toggleClass('bold');
});
.bold {
  font-weight: 700;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="typeBold" class="btn btn-light left">Edit</button>
<div id="textBlock" class="">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>

</div>

1

И тут я бы хотел задать вопрос, зачем тут вообще JavaScript и темболее jQuery ?

HTML

<label for="check1">Кнопка</label>
<input id="check1" type="checkbox">
<div>This text must be bold?</div>

и немного стилей CSS

#check1 { display: none; }
#check1:checked + div { font-weight: bold; color: red; }
1
  • 1
    Иногда бывает легче написать простенький скрипт, чем усложнять HTML и добавлять новые классы) 9 фев 2020 в 6:57
1

$('.js-typeBold').on('click', function() {
  var type = (this.clicked = !this.clicked) ? "900" : "100";
  $(this).next().css('font-weight', type);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="js-typeBold btn btn-light left">Edit</button>
<div>
  <p>Lorem ipsum.</p>
</div>

<button class="js-typeBold btn btn-light left">Edit</button>
<div>
  <p>Lorem ipsum.</p>
</div>

var type = (this.clicked = !this.clicked) ? "900" : "100"; — называется "тернарный оператор". Если результат выражения в скобках будет true, в переменную type запишется строка "900", иначе - "100". this ссылается на объект, в контексте которого была вызвана функция (кликнутая кнопка). Изначально в объекте кнопки нет свойства clicked, поэтому this.clicked - undefined, но сразу же происходит присваивание: this.clicked = !this.clicked как-бы → this.clicked = !undefined. Это логическое ! "НЕ". А undefined в логическом контексте будет false. !false становится true и присваивается в this.clicked (а операция присваивания возвращает присвоенное значение). Значение выражения true → возьмется "900". На следующем клике this.clicked уже хранит значение true. !truefalse, возьмется "100" и так по кругу)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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