Question

我正在尝试更改<div class="comment more>中文字的字体大小。但是当我把<p>放在一边并发短信给＃34;更多切换＆＃34;不再以同样的方式工作。当我点击＆＃34;更多＆＃34;简单的文字完全消失了。当我在.comment more上设置字体大小时，它都不会做任何事情。我是Js的初学者，请指教。

＆＃13;

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();

    showChar = content.search(/<!\-\-\s*break\s*\-\->/);
    if (content.length > showChar && showChar != -1) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

＆＃13;

a {
  color: #108cff;
}
a:visited {
  color: #108cff;
}
a.morelink {
  text-decoration: none;
  outline: none;
  font-style: italic;
}
.morecontent span {
  display: none;
}
.comment more {
  font-size: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="first" class="story" data-speed="4" data-type="background">
  <div id="wrapper">
    <article>





      <div class="comment more">
        An international competition to choose the stadium’s design
        <!-- break -->
        architect and builders is expected to be held in November.
      </div>





    </article>
  </div>
</section>

＆＃13;

Answer 1

以下css出现错误 -

.comment more{
font-size: 50px;
}

正确的方法是 -

.comment.more{
font-size: 50px;
}

完整代码

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();

    showChar = content.search(/<!\-\-\s*break\s*\-\->/);
    if (content.length > showChar && showChar != -1) {

      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);
    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

a {
  color: #108cff;
}
a:visited {
  color: #108cff;
}
a.morelink {
  text-decoration: none;
  outline: none;
  font-style: italic;
}
.morecontent span {
  display: none;
}
.comment.more {
  font-size: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="first" class="story" data-speed="4" data-type="background">
  <div id="wrapper">
    <article>





      <div class="comment more">
        An international competition to choose the stadium’s design
        <!-- break -->
        architect and builders is expected to be held in November.
      </div>





    </article>
  </div>
</section>

使用＆＃34更改字体大小;更多切换＆＃34;

1 个答案: