jquery — показывать больше / меньше после первой запятой в переполнении стека
Я хочу скрыть строку после первой запятой в строке.
Пример: ABCDEF, GHIJKL, MNOPQR.
Выход: ABCDEF..Показать больше
<h2 class="minimize"><?php echo $string; ?></h2>
<script type="text/javascript">
var minimized_elements = jQuery('h2.minimize');
minimized_elements.each(function(){
var t = jQuery(this).text();
if(t.length < 32) return;
jQuery(this).html(
t.slice(0,32)+'<a href="#" class="more_detail">Show More >></a>'+
'<span style="display:none;">'+ t.slice(32,t.length)+' <a href="#" class="less_detail">< Show Less</a></span>'
);
});
jQuery('a.more_detail', minimized_elements).click(function(event){
event.preventDefault();
jQuery(this).hide().prev().hide();
jQuery(this).next().show();
});
jQuery('a.less_detail', minimized_elements).click(function(event){
event.preventDefault();
jQuery(this).parent().hide().prev().show().prev().show();
});
</script>
Я использовал этот код, но он не работает.
Пожалуйста, помогите мне.
Решение
На JQuery, Вы можете просто spit строка
$(function(){
var minimized_elements = jQuery('h2.minimize');
minimized_elements.html(function(){
var arr = $(this).text().split(",");
if ( arr.length === 1 ) return arr[0];
return arr.shift() + '<a href="#" class="more_detail">Show More >> </a>'+'<span style="display:none;">, ' + arr.join(",") + ' <a href="#" class="less_detail"> < Show Less </a> </span>';
});
jQuery('a.more_detail', minimized_elements).click(function(event){
event.preventDefault();
jQuery(this).hide().prev().hide();
jQuery(this).next().show();
});
jQuery('a.less_detail', minimized_elements).click(function(event){
event.preventDefault();
jQuery(this).parent().hide().prev().show().prev().show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2 class="minimize">ABCDEF ,GHIJKL , MNOPQR</h2>
<h2 class="minimize">11111 ,2222 , 3333</h2>
<h2 class="minimize">ABCDEF</h2>Другие решения
Других решений пока нет …
detector