如何清除div中的前一个文本？

Question

使用这个脚本我可以更改div中的文本点击其他文本..我有四个不同的文本和一个Div我想通过点击其他四个文本更改div中的文本，它的工作正常，但问题是当我点击下一个链接时，我也会显示以前的文字，我想清除以前的文字，只显示新文本..请找到附加脚本和HTML，然后帮助我，让我知道进一步的问题。

<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>

这是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>

Answer 1

您无需使用单独的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>

Answer 2

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

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

Answer 3

试试这个：

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

Answer 4

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

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

Working Demo

<强> 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 ..现在这很傻。

Answer 5

如果这是你想要的，我不能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());
    });
});

HTML中的

style="background-color: black;"仅用于测试目的：）

的更新 的

根据OP的请求新main.js：

'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]);
    });
});