2014-03-26 48 views
0

我有一个问题,从开始到第二个breakline不是第一次获得substr函数的字符串的一部分。然后在单击显示长文本或隐藏长文本后,将元素应用于类以隐藏休息和图标下方的文本。默认显示短文本。我的问题是,它显示字符串从开始到第一个breakline不是第二个,因为我需要和点击图标后,它只显示下一部分:一行文本不满。你能请人给我建议。我认为这是text.indexOf('element')中的问题。非常感谢你。 PS:对不起我的英文不好jquery - 如何获得substr的字符串的一部分?

的jsfiddle:example

JQuery的:

$(".content_wrap").each(function() { 
    text = $(this).html(); 
    if (text.length > 350) { 
     alert(text.indexOf('<br>')); 
     $('.cond-arr').show(); 
     $(this).html(text.substr(0, text.indexOf('<br>')) + '<span class="elipsis" style="display:none;">' + text.substr(text.indexOf('<br>'), text.indexOf('<br>') + 1) + '</span><a style="display:block; width 100%; margin: 0 auto; text-align: center" class="elipsis" href="#"><img class="cond-arr" src="http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png" alt="arrow" /></a>'); 
     $(".content_wrap > a.elipsis").click(function(e) { 
      e.preventDefault(); //prevent from being added to the url 
      if ($('span.elipsis').is(':hidden')) { 
       $('img.cond-arr').attr('src', 'http://png-5.findicons.com/files/icons/2222/gloss_basic/36/arrow_up.png'); 
      } else { 
       $('img.cond-arr').attr('src', 'http://findicons.com/files/icons/2222/gloss_basic/36/arrow_down.png'); 
      } 
      $(this).prev('span.elipsis').fadeToggle(500); 
     }); 
    } else { 
     $('.cond-arr').hide(); 
    } 
}); 

HTML:

<div> 

<h2>Title</h2> 
<span class="content_wrap">Something very long Something very long Something very long 
    <br />Something very long 
    Something very long Something very long Something very long Something 
    <b>very long Something very</b> long Something very long Something very long 
    Something very long Something very long Something very longSomething very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long <b>Something very long</b> 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long <strong>Something very long</strong> 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    <br /> 
    <!-- Text after this break line should be hidden default and show only when i click icon below --> 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long Something very long Something very long 
    Something very long Something very long 
</span> 

</div> 

回答

1

不是的indexOf,我认为拆分是在这更好的朋友案例:

var parts = text.split('<br>'); 
var shown = parts.slice(0, 2).join('<br>'); 
var hidden = parts.slice(2).join('<br>'); 

我修改你的小提琴使用shownhidden,它似乎你想要做什么:

http://jsfiddle.net/QpuG8/

+0

你应该修改你的小提琴自己的小提琴。他人如何与我的例子一起工作。 – user3342042

+0

你说得对。对于那个很抱歉。我已经把你的原创分成了我自己的。 – DavidM

+0

谢谢你,它工作正常。 – user3342042

0

您可以使用正则表达式来获得第二<br>的指标:

var re = new RegExp(/<br \/>/g); 
re.exec(text); 
re.exec(text); //Yes, we match twice to get the second match 

var shorterText = text.substr(0,re.lastIndex); 
+0

您可以请发表评论小提琴。谢谢 – user3342042

+0

@ user3342042:是的,在这里你走。 http://jsfiddle.net/Nn3C3/我也会更新答案。 – fiskeben

相关问题