jsBin demo

 < div class =box >这是DIV＃1 :)< / div> 
 

为您的所有人添加一个类 .box 8元素和做：

$ $ p $ jQuery（函数（$）{

var replaceText = $（' （）;
var memorizeText ='';
$ b $（'。box'）。on（{
mouseenter：function（）{
memorizeText = $（this）.next（'。box'）。text（）; //记忆文本
$（this）.next（'.box'）.text（replaceText）;
），
mouseleave：function（）{
$（this）.next（'。box'）。text（memorizeText）; //恢复记忆文本
}，
点击：function（）{
$（this）.next（'。box'）。text（replaceText）;
$（this）.off（'mouseleave mouseenter'）;
}
}）;

}）;


I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden) <div id="replace" style="visibility:hidden;">Bla Bla Bla</div> ​

Here is what I've got so far:

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

Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?

jsBin demo

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

Add a class .box to all your 8 elements and do:

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

});