javascript - How to clear previous text in the div?

Question

using this script i can change the text in a div on click other text..i have four different text and a Div i want to change the text in div by clicking on other four text, its working properly but the problem is that i also show previous text when i click on next link, i want to clear previous text and show only new text..Please find the attach script and HTML and then help me , and let me know for further question.

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").html("My text is changed1!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText").click(function() {
            $("#textBox").html("My text is changed!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").html("My text is changed!2");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText3").click(function() {
            $("#textBox3").html("My text is changed!3");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText5").click(function() {
            $("#textBox5").html("My text is changed5!");
        });
    });
</script>

and this is html

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox3" style="color:#FFF"></div>
    <div id="textBox" style="color:#FFF"></div>
    <div id="textBox1" style="color:#FFF"></div>
    <div id="textBox2" style="color:#FFF"></div>
    <div id="textBox5" style="color:#FFF"></div>
</div>
<div id="textBox4" style="color:#FFF"></div>

score 1 · Accepted Answer

您不需要使用单独的script标签$(document).ready来注册每个点击事件。这都可以一次完成。

更好的解决方案是div为所有选项卡使用一个，但如果您想保留所有 div，以下代码应该有助于解决问题：

<script type="text/javascript">
$(document).ready(function() {
    $("#changeText1").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox1").html("My text is changed1!");
    });

    $("#changeText").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox").html("My text is changed!");
    });

    $("#changeText2").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox2").html("My text is changed!2");
    });

    $("#changeText3").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox3").html("My text is changed!3");
    });

    $("#changeText5").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox5").html("My text is changed5!");
    });
});
</script>

score 0 · Accepted Answer

在设置新文本之前尝试清除元素：

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").empty().html("My text is changed!2");
        });
    });
</script>

score 0 · Accepted Answer

我将假设您没有理由拥有多个 div。当您声明您只想写入一个 div 时。所以问题是你正在写几个 div 而不是一个。如果这不是你想要的，请纠正我。

我还删除了你的几个脚本标签和文本框，因为它们是不必要的——至少在这个例子中是这样。

工作演示

html:

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox" ></div>
</div>
<div id="textBox4" style="color:#FFF"></div>

Javascript：

$(document).ready(function() {
    $("#changeText").click(function() {
        $("#textBox").text("My text is changed!");
    });
    $("#changeText2").click(function() {
        $("#textBox").text("My text is changed!2");
    });
    $("#changeText3").click(function() {
        $("#textBox").text("My text is changed!3");
    });
    $("#changeText5").click(function() {
        $("#textBox").text("My text is changed5!");
    });
});

编辑：忘记保存JSFiddle ..现在这很愚蠢。

score 0 · Accepted Answer

尝试这个：

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").text("My text is changed1!");
        });
    });
</script>

score 0 · Accepted Answer

我不是 100% 确定这是否是你想要的。但是请发表评论，我会更新它。这是一个智能选择结构，它取消了您在代码中创建的所有双峰。

尝试只使用一次就绪状态，它更干净：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <ul class="tabs">
        <li><a href="#" id="changeText">inclusive</a></li>
        <li><a href="#" id="changeText2">Hotel</a></li>
        <li><a href="#" id="changeText3">Car</a></li>
        <li class="end"><a href="#" id="changeText5">Cruise</a></li>
    </ul>
    <div class="tabs_cont" style="background-color: black;">
        <div id="textBox3" style="color:#FFF">3</div>
        <div id="textBox" style="color:#FFF">0</div>
        <div id="textBox1" style="color:#FFF">1</div>
        <div id="textBox2" style="color:#FFF">2</div>
        <div id="textBox5" style="color:#FFF">5</div>
    </div>
    <div id="textBox4" style="color:#FFF"></div>
</body>
</html>

main.js

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];
        var backup_html = $('.tabs_cont #textBox' + index).html();

        // These are all the textboxes you want to match
        $('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + (index == 0 ? 0 : index) + ': ' + $(this).html());
    });
});

style="background-color: black;"在 HTML 中仅用于测试目的:)

更新

main.js根据OP 的要求，新的：

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = 'My text has changed: ';

        switch(index) {
            case '':
                new_html += 'Text for 0';
                break;
            case '1':
                new_html += 'Text for 1';
                break;
            case '2':
                new_html += 'Text for 2';
                break;
            case '3':
                new_html += 'Text for 3';
                break;
            case '4':
                new_html += 'Text for 4';
                break;
            case '5':
                new_html += 'Text for 5';
                break;
        }

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html(new_html);
    });
});

第二个变体，带有更清晰的地图选择器

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = {
            '' : 'Text for 0',
            '1' : 'Text for 1',
            '2' : 'Text for 2',
            '3' : 'Text for 3',
            '4' : 'Text for 4',
            '5' : 'Text for 5',
        };

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + new_html[index]);
    });
});

javascript - How to clear previous text in the div?

5 回答 5

Related

Reference