Swapping Text von Eltern und Kind-Elementen

Question

Ich habe die folgenden Elemente:

<div contenteditable="true" id="write"> 
    <div class="tooltip"> 
    <span>test</span>&nbsp; <!--text to be written in text area--> 
    <span class="tooltiptext"> <!--holds words to be displayed on hover--> 
     <span class="popUpWord">hello</span> 
     <br> 
     <span class="popUpWord">dog</span> 
    </span> 
    </div> 
    <div class="tooltip"> 
    <span>test</span>&nbsp; 
    <span class="tooltiptext"> 
    <span class="popUpWord">hello</span> 
    <br> 
    <span class="popUpWord">test</span> 
    </span> 
    </div> 
</div> 

Diese im Grunde zeigen ein Pop-up ähnlich den folgenden - http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

Auf Hover-Ereignisse von Elementen des‘.tooltop mit 'class (Wörter, die im Pop-up-Bereich angezeigt werden sollen), ich möchte das Wort, das im Pop-up-Bereich schwebt, mit dem im Textbereich angezeigten Wort nach ein paar Sekunden austauschen.

Ich habe die folgende Funktion:

//--choosing word from pop-up list--// 

$(document).on("mouseover", ".popUpWord", function(e) 
{ 
if(!timeoutId) 
{ 
    timeoutId=window.setTimeout(function() 
    { 
     timeoutId=null; 
     e.currentTarget.innerHTML = e.fromElement.parentElement.parentElement.childNodes[0].childNodes[0].innerText; 
     /*not working*/ e.fromElement.parentElement.parentElement.childNodes[0].childNodes[0].innerHTML = e.currentTarget.innerHTML; //Although the elements I want to swap are referred to correctly,the element's text is not changing. (Tried using innerText) 
    },1500); 
} 
}).on('mouseout', '.popUpWord', function(e) 
{ 
if(timeoutId) 
{ 
    window.clearTimeout(timeoutId); 
    timeoutId=null; 
} 
}); 

jedoch in der Linie not working markiert - der Text des Elements ändert sich nicht. Und es wird korrekt bezeichnet.

Jede Hilfe wird sehr geschätzt.

Dank

Answer 1

Sein, weil Sie den Wert Tooltip mit dem Textelement und zuweisen Neuzuweisung es dem Tooltip.

Versuchen Sie folgendes:

timeoutId=null; 
var text = e.currentTarget.innerHTML; 
e.currentTarget.innerHTML = e.fromElement.parentElement.parentElement.childNodes[0].childNodes[0].innerText; 
e.fromElement.parentElement.parentElement.childNodes[0].childNodes[0].innerHTML = text; 

Answer 2

Sie versuchen, die Quell- und Zielelemente in einer Art und Weise zu finden, die nur zu Sprödigkeit und Fehlern führen kann. Gib Elemente, von denen du weißt, dass du mit id arbeiten willst, und rede sie so an.

Probieren Sie es aus. Schwebe über "helo".

var orig = $("orig"); 
 
var hold = $("hold"); 
 
var timeoutId = null; 
 

 
$(".popUpWord").on("mouseover", function(e){ 
 
    if(!timeoutId) { 
 
    timeoutId = setTimeout(function() { 
 
     e.target.innerHTML = original.textContent; 
 
     original.innerHTML = e.target.innerHTML; 
 
    },1500); 
 
    } 
 
}).on('mouseout', function(e){ 
 
    if(timeoutId) { 
 
    clearTimeout(timeoutId); 
 
    timeoutId = null; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true" id="write"> 
 
    <div class="tooltip"> 
 
    <span id="original">test</span>&nbsp; <!--text to be written in text area--> 
 
    <span class="tooltiptext"> <!--holds words to be displayed on hover--> 
 
     <span id="hold" class="popUpWord">hello</span> 
 
     <br> 
 
     <span class="popUpWord">dog</span> 
 
    </span> 
 
    </div> 
 
    <div class="tooltip"> 
 
    <span>test</span>&nbsp; 
 
    <span class="tooltiptext"> 
 
    <span class="popUpWord">hello</span> 
 
    <br> 
 
    <span class="popUpWord">test</span> 
 
    </span> 
 
    </div> 
 
</div>

Answer 3

Sie werden die neuen Text-Strings in einer Variablen speichern müssen. Ansonsten stellst du es gleich wieder zurück:

timeoutId=window.setTimeout(function() 
    { 
     var child = e.currentTarget, 
      parent = e.fromElement.parentElement.parentElement.childNodes[0].childNodes[0], 
      childtext = child.innerText, 
      parenttext = parent.innerText 

     child.innerHTML = parenttext; 
     parent.innerHTML = childtext; 
    },1500);