Question

我无法让这样的事情发挥作用。我有一系列DIVS（1到8），当你将鼠标悬停在一个div上时，我希望用#replace（当前设置为隐藏）的内容逐字地更改其中一个div的内容 <div id="replace" style="visibility:hidden;">Bla Bla Bla</div>

这是我到目前为止所得到的：

$('#1').on({
    mouseover: function(){
        $('#2').replaceWith(jQuery('#replace'));
    },
     mouseleave: function(){
        $('#2').replaceWith(jQuery('#2'));
    },
    click: function(){
        $('#2').replaceWith(jQuery('#replace'));
        $('#1').off('mouseleave mouseover');
    }
});

根本没有效果 - 所以我的逻辑不好，我做得怎么样，等等......？

Answer 1

jsBin demo

<div class="box">This is DIV #1 :) </div>

为所有8个元素添加一个类.box并执行：

jQuery(function($){

  var replaceText = $('#replace').text();
  var memorizeText = '';

  $('.box').on({
      mouseenter: function(){
          memorizeText = $(this).next('.box').text();   // memorize text
          $(this).next('.box').text(replaceText);
      },
      mouseleave: function(){
          $(this).next('.box').text( memorizeText );    // restore memorized text
      },
      click: function(){
          $(this).next('.box').text( replaceText );
          $(this).off('mouseleave mouseenter');
      }
  });

});

Answer 2

喜欢这个吗？

<div class="page">
    <div class="content">Bla bla bla</div>
</div>
<div class="page">
    <div class="content">Some more text</div>
    <div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
    <div class="content">Hello there</div>
    <div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
    <div class="content">Test</div>
    <div class="content-alt" style="display: none;">Hi!</div>
</div>

<强> JS

$('.page').on({
    mouseover: function(){
        var nextPage = $(this).next('.page');
        nextPage.children('.content').hide();
        nextPage.children('.content-alt').show();
    },
     mouseleave: function(){
        var nextPage = $(this).next('.page');
        nextPage.children('.content').show();
        nextPage.children('.content-alt').hide();
    }
});

原始答案

如果我理解你的问题，你可以试试这个：

<强> HTML

<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>

<div id="hidden" style="display: none">This is some hidden text</div>

<强> JS

$('#page1').on({
    mouseover: function(){
        $('#page2 .name').hide().after($('#replace'));
    },
     mouseleave: function(){
        $('#hidden').hide();
        $('#page2 .name').show();
    },
    click: function(){
        $('#hidden').hide();
        $('#page2 .name').show();
        $('#1').off('mouseleave mouseover');
    }
});

但我不确定你为什么要这样做。你只是试图在鼠标上显示和隐藏一些文字吗？

Answer 3

没有关于HTML结构的内容，此目的等等的大量数据。但以下是一个可以实现您所提问题的示例结构 - 并且它有点短当他们都做同样的事情时，为每个div写出一个特定的处理使得它有点不必要地长。代码如下，在此jsfiddle

中也是如此

<强> HTML

<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>

<强> CSS

#replacementText {
    visibility: hidden;
}

<强> JQuery的

$('.replace-me').mouseover(function() {
    $(this).text($('#replacementText').text());
});
$('.replace-me').mouseout(function() {
    $(this).text("DIV "+$(this).attr('id'));
});

当另一个div徘徊时，切换div的内容

3 个答案:

jsBin demo

原始答案