Question

我得到了正确的substr（）方法值但我无法获得原始值。请让我知道如何获得原始值。

ex）＆＃34; AAAAAA＆＃34; - ＆GT; AA ...但我不能支持AA ...... - ＆gt; AAAAAA

这是我的示例代码。

if ($(window).scrollTop() > 100) {
    var name= $('#aaa').text();
    var ellipses = name.substr(0, 9) + '...';
    document.getElementById('aaa').innerHTML = ellipses;
} else {
    //scrollTop() < 99 //I would like back the original value. 
}

Answer 1

为什么在擦拭之后你会期望原始价值在那里？一旦你覆盖了一个元素的文本内容，它就会消失。

您需要先将原始值保存在某处，这是一个想法：

$('#aaa').data('origValue', $('#aaa').text());
if ($(window).scrollTop() > 100) {
    var name = $('#aaa').text();
    var ellipses = name.substr(0, 9) + '...';
    document.getElementById('aaa').innerHTML = ellipses;
} else {
    //scrollTop() < 99 //I would like back the default value. 
    $('#aaa').text($('#aaa').data('origValue'));
}

此示例使用HTML5 data- *属性存储原始文本，然后在向上滚动时读取它。正如我所说的，只是一个想法，有很多其他方法可以在某个地方存储该文本，但你必须存储它。

以下是您可能希望实现的一个示例：

$('#aaa').data('origValue', $('#aaa').text());

$(window).scroll(function(){
  if ($(window).scrollTop() > 100) {
    var name = $('#aaa').text();
    var ellipses = name.substr(0, 9) + '...';
    document.getElementById('aaa').innerHTML = ellipses;
  } else {
    //scrollTop() < 99 //I would like back the default value. 
    $('#aaa').text($('#aaa').data('origValue'));
  }
});

div {padding: 120px 0; min-height: 300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aaa">Some super-mega-long text here! Try scrolling...</div>

Answer 2

虽然另一个答案是完全正确的，但您可以将值存储在某处。

另一种方法是使用view简单截断css中的项目。

css类，如：

.truncate {
  width: 35px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这可以在需要滚动时应用：

$('#aaa').addClass("truncate");

然后当滚动> 100：

$('#aaa').removeClass("truncate");

这样就不会操纵值，只是用户查看。之后还可以添加过渡以使事情变得更漂亮。

这又是另外一个解决方案！

如何将substr值恢复为原始值？

2 个答案: