Как поменять толщину текста при клике на кнопку и обратно JQuery

Question

$('#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>

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

Answer 1

$('#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>

Answer 2

И тут я бы хотел задать вопрос, зачем тут вообще 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; }

Answer 3

$('.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. !true → false, возьмется "100" и так по кругу)

БЛОГ НА HUSL

Как поменять толщину текста при клике на кнопку и обратно JQuery

Ответы (3 шт):