Question

学习JQuery ......

我从＆＃34;学习JQuery＆＃34;以及以下HTML标记。书：

＆＃13;

$(document).ready(function() {
  $('div#f-author').click(function() {
    if ($(this).hasClass('boldFont')) {
      $(this).replaceWith('<div id="f-author">' + $(this).text() + '</div>');
    } else {
      $(this).wrapInner('<b></b>').addClass('boldFont');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
      <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
      <div id="f-author">by Edwin A. Abbott</div>
      <h2>Part 1, Section 3</h2>
      <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
      <div id="excerpt">an excerpt</div>
</div>

＆＃13;

所以我通过更改样式表或使用jssery操作css 来切换<div id="f-author">by Edwin A. Abbott</div>在粗体和正常之间，而不使用css 。我设法切换一次，但没有更多。为什么我不能多次切换？请不要给我正确的答案，但这只是不起作用的原因。

注意：对不起我的问题中的所有这些更改！将在下一次尝试做得更好。

Answer 1

你想要为什么会发生这种情况，所以这就是：

您将一个事件绑定到一个具有id f-author的div上，在这种情况下是一个click事件。但是当你第二次点击时，你会调用一个名为replaceWith()的方法，它正如它所说的那样。它用新的元素替换元素。即使你替换的元素是相同的（相同的标记，相同的id等），jQuery也不会识别这种相似性。调用replaceWith()时，基本上会删除绑定到此元素的所有事件。有关事件委派的好解决方案，请阅读CarstenLøvboAndersen的评论

Answer 2

只需检查JQuery中的font-weight属性并相应地进行设置。

$(document).ready(function() {
  $('div#f-author').click(function() {
    fontWeight = $(this).css('font-weight')
    if (fontWeight == 'bold') {
      $(this).css({
        "font-weight": "normal"
      });
    } else {
      $(this).css({
        "font-weight": "bold"
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <h1 id="f-title">Flatland: A Romance of Many Dimensions</h1>
  <div id="f-author">by Edwin A. Abbott</div>
  <h2>Part 1, Section 3</h2>
  <h3 id="f-subtitle">Concerning the Inhabitants of Flatland</h3>
  <div id="excerpt">an excerpt</div>
</div>

点击之间切换

2 个答案: