Javascript 如果对我的期望给出相反的响应，请阅读更多_Javascript_Html

Javascript 如果对我的期望给出相反的响应，请阅读更多

javascript html

Javascript 如果对我的期望给出相反的响应，请阅读更多,javascript,html,Javascript,Html,我在我的程序中使用了readmore javascript，它可以运行，但答案不正确当我单击“查看更多”时，它提供的输出较少，而当我单击“查看较少”时，它是“查看更多”。它显示出与它应该是的相反我试着更改代码，但它不能正常工作 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> &l

我在我的程序中使用了readmore javascript，它可以运行，但答案不正确

当我单击“查看更多”时，它提供的输出较少，而当我单击“查看较少”时，它是“查看更多”。它显示出与它应该是的相反

我试着更改代码，但它不能正常工作

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script>
  $(document).ready(function() {
    // Configure/customize these variables.
    var showChar = 50; // How many characters are shown by default
    var ellipsestext = "...";
    var moretext = "Show more >";
    var lesstext = "Show less";

    $('.more').each(function() {
      var content = $(this).html();

      if(content.length > showChar) {
        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;
    });
  });
  </script>
  <title>jQuery Read More/Less Toggle Example</title>
</head>
<body>
  <span class="more">
    Lorem ipsum dolor sit dolore magna aliqua.Excepteur sint occaecat cupidatat anim id est laborum.
  </span>
  <br><br>
  <div class="more">
    Morbi placerat imperdiet arcu massa. In hac <a href="#">habitasse</a> platea dictumst.  <em>convallis magna nunc</em>, id rhoncus massa ornare in. 
  </div>
</body>
</html>

您在中的定位点中放置了错误的文本。morelink单击处理程序。您需要按如下方式进行更改：

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(lesstext);
    } else {
        $(this).addClass("less");
        $(this).html(moretext);
    }
    // rest of code here
}

要在开始时显示正确的标签，还必须将在document load moretext上创建的html内容更改为lesstext：

然后它将以您想要的方式运行，但要正确剪切文本，您必须对代码进行更多更改。

感谢您的重播。在何处使用此变量html？我把你的jacascript代码放在我的程序里，这不是工作，是工作，但现在它先显示，然后显示more@Bhaveshvar html=。。。您需要放置代码，而不是放在代码的同一行。在内联javascript代码的第12行中有它。我将修改后的示例放到JSFIDLE中—看一看。另外，请花点时间理解应用程序中的每一行代码意味着什么，因为如果不了解基本知识，您将无法继续前进。我编辑了标题，以便对您所看到的问题给出一个简短的解释—删除句子结构，并将其转化为一个简单的要点。我更新了这篇文章的语法，使之更符合英语，没关系。。。你问得这么好真是太好了！

var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + lesstext + '</a></span>';