Javascript 交换父元素和子元素的文本

Javascript 交换父元素和子元素的文本,javascript,jquery,dom,mouseevent,addeventlistener,Javascript,Jquery,Dom,Mouseevent,Addeventlistener,我有以下几点: <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 ho

我有以下几点:

<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>
但是,在标记为
不工作的行中
-元素的文本没有更改。它被正确地引用了

非常感谢您的帮助


感谢您将工具提示的值指定给文本元素并重新指定给工具提示

试试这个:

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;

这是因为您正在将工具提示的值指定给文本元素并将其重新指定给工具提示

试试这个:

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;

您试图以一种只会导致脆弱性和错误的方式来定位源元素和目标元素。给出您知道要使用
id
s的元素,并以这种方式引用它们

试试这个。悬停在“直升机”上方

var orig=$(“orig”);
var hold=$(“hold”);
var timeoutId=null;
$(.popUpWord”)。在(“鼠标悬停”,函数(e)上{
如果(!timeoutId){
timeoutId=setTimeout(函数(){
e、 target.innerHTML=original.textContent;
original.innerHTML=e.target.innerHTML;
},1500);
}
}).on('mouseout',函数(e){
if(超时ID){
clearTimeout(timeoutId);
timeoutId=null;
}
});

试验
你好

狗 试验 你好
测试
您试图以一种只会导致脆弱性和错误的方式定位源元素和目标元素。给出您知道要使用
id
s的元素,并以这种方式引用它们

试试这个。悬停在“直升机”上方

var orig=$(“orig”);
var hold=$(“hold”);
var timeoutId=null;
$(.popUpWord”)。在(“鼠标悬停”,函数(e)上{
如果(!timeoutId){
timeoutId=setTimeout(函数(){
e、 target.innerHTML=original.textContent;
original.innerHTML=e.target.innerHTML;
},1500);
}
}).on('mouseout',函数(e){
if(超时ID){
clearTimeout(timeoutId);
timeoutId=null;
}
});

试验
你好

狗 试验 你好
测试
您需要将新文本字符串存储在变量中。否则,您只是将其设置回原位:

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

您需要将新的文本字符串存储在变量中。否则,您只是将其设置回原位:

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

这部分起作用。我会在弹出区有不止一个单词。如何将悬停的单词(在弹出区域中)与文本区域中的相应单词交换?目前,文本区域中的第一个单词总是在变化。这部分起作用。我会在弹出区有不止一个单词。如何将悬停的单词(在弹出区域中)与文本区域中的相应单词交换?当前,文本区域中的第一个单词总是在变化。