gpt4 book ai didi

javascript - chop 循环内文本的字符

转载 作者:行者123 更新时间:2023-12-01 01:42:51 27 4
gpt4 key购买 nike

我这里遇到了一些问题。

我基本上是在 div 中循环项目,以便每个项目都有一个可以使用的键,这样当单击图标时,就会出现一个编辑模式并填充所选项目的数据。

这可行,但我想为我的跨度添加功能 <span>{{ $node->comment }}</span>因此,如果文本超过 10 个字符,它将用“***”替换 10 个字符之后的所有内容。我尝试添加 element.innerHTML = getValue.substring(0 ,4) + ' *** '但它不起作用,并且它超越了使用 key 的功能。

有没有办法替换文本字符并保留循环/按键功能?

@foreach($nodes as $key => $node)  


<div class="uk-width-1-1">
<div class="uk-grid uk-grid-small">
<div class="uk-width-2-10">
{{$node->id}} - {{$node->desc}}
</div>
<div class="uk-width-2-10 testLoop">
<span>{{ $node->comment }}</span>
<a href="#edit-modal{{ $key }}" data-uk-modal><span class="uk-icon-check"></span></a>
</div>
</div>
</div>

<div id="edit-modal{{ $key }}" class="uk-modal">
<div class="uk-modal-dialog">
<div class="uk-width-1-1">
<div class="uk-grid uk-grid-small">
<div class="uk-width-2-10">
{{$node->id}} - {{$node->desc}}
</div>

<div class="uk-width-2-10 testLoop">
<span>{{ $node->comment }}</span>
</div>
</div>
</div>
</div>
</div>
@endforeach

function testLoop() {

var comment = document.getElementsByClassName('testLoop'),
commentText = comment;

for (var index = 0; index < commentText.length; index++) {
var element = commentText[index];
var getValue = element.children[0].innerHTML;

element.addEventListener('click',function(){
console.log('click');
})
}
}
testLoop();

最佳答案

您的子字符串应为 (0,10)(十个字符)。

let element = document.getElementById('text')
element.innerText = element.innerText.substring(0,10) + '***'
<span id='text'>Long long long long text</span>

另一种方法

使用 max-width 代替字符长度,并将 CSS 设置为 chop 并显示省略号。 CSS 会为您完成所有工作。

#text {
max-width: 90px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div id='text'>This is a long, long, long string.</div>

关于javascript - chop 循环内文本的字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52257812/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com