클릭하면 최상위 레벨 항목이있는 항목이 교환됩니다.

Question

div의 다른 요소의 내용으로 요소의 내용을 바꾸려고합니다.

나는 바이올린을 만들었습니다하지만 몇 가지 문제가 있습니다.

https://jsfiddle.net/2o3u0366/

$('.value').click(function(){ 
var newValue = $(this).text(); 
$(this).replaceWith($('.header').text()); 
$('.header').text(newValue); 
}); 

<div class="dropdown"> 
<h2 class="header">This</h2> 
<h2 class="value">That</h2> 
<h2 class="value">Three</h2> 
<h2 class="value">Four 
</h2> 
</div> 
<div class="dropdown"> 
<h2 class="header">This</h2> 
<h2 class="value">That</h2> 
<h2 class="value">Three</h2> 
<h2 class="value">Four</h2> 
</div> 

나는 그것이 요소에 현재 사업부에서 끌어 가지고 찾고 있어요을 당신이 할 수있는 예제에서 보면, 같은 클래스의 각 div에서 가져옵니다. 나는 "THIS"문을 어디에 두어야하는지 또는이 함수를 작동시키기 위해 어떻게 DOM을 트래버스 할 수 있는지를 알 수 없다.

도움이나 의견을 보내 주시면 대단히 감사하겠습니다. 감사합니다.

Answer 1

한 가지 방법은 .closest()을 사용하여 포함 된 div로 이동 한 다음 .find()으로 이동하여 해당 div 내의 헤더 항목을 가져 오는 것입니다. 텍스트를 설정하기 때문에 .replaceWith()이 필요하지 않습니다. 다음 코드에서는 동일한 선택기를 사용하여 $()을 반복 호출하지 않고 저장하기 위해 현재 항목과 머리글을 참조하는 변수를 만들었습니다.

이 같이

$('.value').click(function(){ 
 
    var $this = $(this); 
 
    var $header = $this.closest(".dropdown").find('.header'); 
 
    var newValue = $this.text(); 
 
    $this.text($header.text()); 
 
    $header.text(newValue); 
 
});

.dropdown { float: left; margin-right: 100px; } 
 
.dropdown:first-of-type { background: blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dropdown"> 
 
<h2 class="header">This</h2> 
 
<h2 class="value">That</h2> 
 
<h2 class="value">Three</h2> 
 
<h2 class="value">Four 
 
</h2> 
 
</div> 
 
<div class="dropdown"> 
 
<h2 class="header">This</h2> 
 
<h2 class="value">That</h2> 
 
<h2 class="value">Three</h2> 
 
<h2 class="value">Four</h2> 
 
</div>