0

请单击：click it然后：通过在函数中添加一些行：Show_More_Less()，有人可以告诉我如何执行以下操作：

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

2) "show less" - 显示 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>

任何帮助表示赞赏！

4

2 回答 2

3

将 设置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/

于 2013-06-17T03:57:23.733 回答
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>

链接到提琴手

于 2013-06-17T03:57:11.607 回答