想做出更多选择

我有一个事实框，其内容可以从p, li or img tags变化，并且内容的长度也可能有所不同。因此，我试图制作一个仅显示部分内容的功能，并且提供了一个用于"read more"的按钮。想做出更多选择

但我的问题是，当我使用子字符串来计算从哪里开始，以及在哪里停止，并将按钮“阅读更多”，但它采取了HTML文本和纯文本，但我只需要纯文本。

所以我的问题是：我如何删除所有的HTML文本，只是得到纯文本，所以它不关心什么样的内容是在我的事实框中，它仍然只会显示一部分文本，并隐藏休息，带有可显示更多选项的按钮。 ??

我的函数，只显示部分关闭事实框：

$(document).ready(function() { 
var showChar = 100; 
var ellipsestext = "..."; 
var moretext = "Read more"; 
var lesstext = "less"; 

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

    if (content.length > showChar) { 

     var c = content.substr(0, showChar); 
     var h = content.substr(showChar - 1, 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; 
});

}）;

和我的HTML和agian可能改变它所包含的内容

<div class="fact-banner"> 
    <h4 class="title">fact headline</h4> 
    <div class="showMoreLess"> 
      <div class="text"> 
       <p>blablabla</p> 
       <p>blablabla</p> 
       <p>blablabla</p> 
       <p>blablabla</p> 
      </div 
      <div class="img"> 
       <div class="image-banner text" style="padding-top: 0;margin-top:0"> 
        <div class="image"> 
         <img src="/bla.jpg" alt="bla" /> 
        </div> 
        <div class="title"> 
         <p>imageText</p> 
        </div> 
       </div> 
      </div> 

      <div class="text" style="padding-top: 0; padding-bottom: 0"> 
       <a href="linkToRelevantsite"> Relevant site to the article </a> 
      </div> 
     </div>

我希望我意义:)

来源

2016-02-22 Jacob Arensoee

这一个覆盖非常好前一个问题： [http://stackoverflow.com/questions/822452/strip-html-from-text-javascript]（ http://stackoverflow.com/questions/822452/strip-html-from-text-javascript） – singleTrackVale

尝试使用.text()代替.html()：

var content = $(this).text();

来源

2016-02-22 21:09:59

使用.text的问题是，它会删除我的h4等，并将其全部转换为纯文本格式：/ –

你的问题听起来像是这样的目标：“我如何删除所有的HTML文本，并获得纯文本”，你能澄清你的问题吗？ –

对不起，我可以看到有点误导。但我想做一个阅读更多的选项，隐藏我的一些内容在事实框中，我仍然保留我的所有标签。 –

的措辞你的问题肯定是令人困惑的。我认为你想要的是overflow:hidden;而不是实际去除标签。

将.text-wrapper附加到您的.text。当折叠时，.text-wrapper将具有固定的高度，并且在展开时具有高度自动。 .text-wrapper将有overflow: hidden。

这里有一个快速codepen： http://codepen.io/anon/pen/mVZNvv

来源

2016-02-23 00:09:05

想做出更多选择

回答

相关问题