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

在具有＆＃39; .tooltop＆＃39;的元素的悬停事件中class（要在弹出区域内显示的单词），我想交换弹出区域中悬停的单词，并在几秒钟后显示文本区域中的单词。

我做了以下功能：

//--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的元素并以这种方式引用它们。

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

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

3 个答案: