Question

请点击：click it，然后：在功能中添加一些代码：Show_More_Less()，有人可以告诉我，我该怎样才能完成下一步：

1）如果用户按下“显示更多” - 显示所有文本，show more将变为“显示更少”。

2）“显示更少” - 显示文字的90个字符，show less将变为show more。

我尝试这样做但是我覆盖了文本（这就是为什么它永远改为90个字符）。

我希望初始条件为：只显示90个字符，div的文字为show more

<!DOCTYPE html>
<html>
<body>

<script>

function add_text_to_textarea() {
   var str = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore";

    if (str.length > 90) {
         document.getElementById('show_more_less').style.visibility = 'visible';
    }
    else {
         document.getElementById('show_more_less').style.visibility = 'hidden';
    }
    document.getElementById('mytext').innerHTML = str;

}

function Show_More_Less() {
    var e = document.getElementById('show_more_less').innerHTML.toUpperCase();
    var str = document.getElementById('mytext').innerHTML;
    if (e == "SHOW MORE") {
        document.getElementById('mytext').innerHTML = str;
        document.getElementById('show_more_less').innerHTML = "Show less";
    }
    else {
        document.getElementById('mytext').innerHTML = str.substr(0,90);
        document.getElementById('show_more_less').innerHTML = "Show more";
    }
 }
</script>

<textarea id="mytext"></textarea>

<div id="run_fun" onClick="add_text_to_textarea();">click it</div>
<div id="show_more_less" onClick="Show_More_Less();" style="visibility : hidden;">Show more</div>

</body>
</html>

任何帮助表示赞赏！

Answer 1

将var str设置为两个函数均可访问的全局变量。而不是使用str在每次点击时更改.innerHTML，只需在全局变量上执行子字符串而不更改它：

var str = '';
function add_text_to_textarea() {
    str = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore";

    if (str.length > 90) {
        document.getElementById('show_more_less').style.visibility = 'visible';
        document.getElementById('mytext').innerHTML = str.substr(0,90);
        document.getElementById('show_more_less').innerHTML = "Show more";
    }
    else {
        document.getElementById('show_more_less').style.visibility = 'hidden';
        document.getElementById('mytext').innerHTML = str;
    }

}

function Show_More_Less() {
    var e = document.getElementById('show_more_less').innerHTML.toUpperCase();
    if (e == "SHOW MORE") {
        document.getElementById('mytext').innerHTML = str;
        document.getElementById('show_more_less').innerHTML = "Show less";
    }
    else {
        document.getElementById('mytext').innerHTML = str.substr(0,90);
        document.getElementById('show_more_less').innerHTML = "Show more";
    }
}

小提琴：http://jsfiddle.net/wY9rY/1/

Answer 2

添加一个全局变量，在修剪之前保存字符串的内容 - 并在需要时 - 从该变量中恢复信息：

<!DOCTYPE html>
<html>
<body>

<script>

function add_text_to_textarea() {
   var str = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore";

    if (str.length > 90) {
         document.getElementById('show_more_less').style.visibility = 'visible';
    }
    else {
         document.getElementById('show_more_less').style.visibility = 'hidden';
    }
    document.getElementById('mytext').innerHTML = str;

}
string_saver = "";

function Show_More_Less() {
    var e = document.getElementById('show_more_less').innerHTML.toUpperCase();
    var str = document.getElementById('mytext').innerHTML;  
    if (e == "SHOW MORE") {
        if(string_saver != "") str = string_saver;
        document.getElementById('mytext').innerHTML = str;
        document.getElementById('show_more_less').innerHTML = "Show less";
    }
    else {
        string_saver = str;
        document.getElementById('mytext').innerHTML = str.substr(0,90);
        document.getElementById('show_more_less').innerHTML = "Show more";
    }
 }
</script>

<textarea id="mytext"></textarea>

<div id="run_fun" onClick="add_text_to_textarea();">click it</div>
<div id="show_more_less" onClick="Show_More_Less();" style="visibility : hidden;">Show less</div>

</body>
</html>

链接到 fidder

显示更多并显示更少的textarea

2 个答案: