交换实现文本

Question

我有以下要素：

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

这些基本显示弹出类似于下面 - http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

在具有” .tooltop元素的悬停事件'类（在弹出区域内显示单词），我想将弹出区域中悬停的单词与几秒钟后在文本区域中显示的单词进行交换。

我做了以下功能：

//--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; 
} 
}); 

然而，行标not working - 元素的文本没有改变。它正在被正确引用。

任何帮助，非常感谢。

感谢

Answer 1

它，因为你是分配工具提示的值到文本元素，并将其重新分配给提示。

试试这个：

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

您试图查找的方式，只能导致脆性和错误的源和目标元素。给你知道你想要与id s一起工作的元素并参考他们。

试试看。将鼠标悬停在“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

您将需要新的文本字符串存储在一个变量。否则，你只是把它设置在右后方：

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