如何在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 type="text/javascript"> 
    $(document).ready(function() { 
     $("#changeText2").click(function() { 
      $("#textBox2").empty().html("My text is changed!2"); 
     }); 
    }); 
</script> 

Answer 2

试试这个：

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

Answer 3

我要去承担你没有理由有几个迪与当你声明你只想写入一个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 4

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

为主。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;"只是出于测试目的:)

UPDATE

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