0

クリックしてください:click itそして、関数にいくつかの行を追加して: Show_More_Less()、次の次のことを行うにはどうすればよいか教えてください:

1) ユーザーが "show more" を押すと、すべてのテキストが表示されshow more、`show less' になります。

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>

どんな助けでも大歓迎です！

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 に答える