Question

Jquery显示更少的功能无法正常工作。我做了但没有正确显示。你能找到我错误的地方吗？的jsfiddle：http://jsfiddle.net/WtdEh/273/

var showChar = 14;
var ellipsestext = "";
var moretext = "...";
var lesstext = "Less";
$('span[comments-space]').each(function() {
  var content = $(this).html();
  if (content.length > showChar) {
    var show_content = content.substr(0, showChar);
    var hide_content = content.substr(showChar, content.length - showChar);
    var html = '&nbsp;&nbsp;<a href="" morelink>' + moretext + '</a></span>' + show_content + '<span remaining-content><span>' + hide_content + '</span>';
    $(this).html(html);
  }
});

$("a[morelink]").click(function() {
  if ($(this).hasClass("less")) {
    $(this).removeClass("less");
    $(this).html(moretext);
  } else {
    $(this).addClass("less");
    $(this).html(lesstext);
  }
  $(this).parent().next().toggle();
  $(this).next().toggle();
  return false;
});

$("span[remaining-content] span").css('display', 'none');

.remaining-content span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Testing<span comments-space>123456783463463463463463469999</span></div>
<div>Testing<span comments-space>123456783463463463463463469999</span></div>
<div>Testing<span comments-space>123456783463463463463463469999</span></div>

Answer 1

首先，当你创建'剩余内容'范围时，你认为你正在修改html，但你不是，你正在添加DOM节点。

abc123需要变为abc123而不是123123。

改变了这一行：

var html = '&nbsp;&nbsp;<a href="" morelink>' + moretext + '</a>'
          +'</span>' + show_content 
          + '<span remaining-content><span>' + hide_content + '</span>';

到

var html = '&nbsp;&nbsp;<a href="" morelink>' + moretext + '</a>' 
         + show_content 
         + '<span remaining-content>' + hide_content + '</span>';

然后您只需要在适当时显示/隐藏remaining-content

if ($(this).hasClass("less")) {
    $(this).removeClass("less");
    $(this).html(moretext);
    $(this).parent().find("span[remaining-content]").show();
} else {
    $(this).addClass("less");
    $(this).html(lesstext);
    $(this).parent().find("span[remaining-content]").hide();
}

$("span[remaining-content]").css('display','none');

更新了小提琴：http://jsfiddle.net/WtdEh/274/

顺便说一下，您可能会发现使用类而不是html属性更容易，因为不严格允许随机html属性。类不需要与样式相关，而是可以具有语义含义。

显示更少的功能Jquery

1 个答案: