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가 아닌 여러 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> 

자바 스크립트 :

$(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의를 유지하려는 경우 : 나는 경우 100 % 확실하지 않다

<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

을 이것이 당신이 원하는 것입니다. 하지만 의견을 남겨 주시면 업데이트하겠습니다. 이 코드는 스마트 선택 구조로 코드에서 작성한 모든 이중 복사를 취소합니다.

한 번만 준비 상태를 사용해보십시오, 훨씬 청소기입니다 :

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

주요

HTML.JS되는 HTML에서

'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;" 테스트 목적 :

업데이트에 불과했다

영업의 요청에 따라 새로운 main.js : 2

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