0

このようなものを機能させるのに問題があります。一連の DIVS (1 ～ 8) があり、1 つの div にカーソルを合わせると、他の div の 1 つのコンテンツを #replace (現在は非表示に設定されています) のコンテンツで文字通り変更したいと考えています <div id="replace" style="visibility:hidden;">Bla Bla Bla</div> 。 /p>

これが私がこれまでに得たものです：

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

実際にはまったく効果がありません-つまり、私のロジックが悪いのでしょうか、どのようにそれを行うのが悪いのでしょうか...?

4

3 に答える 3

1

jsBin デモ

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

.box8 つの要素すべてにクラスを追加して、次のようにします。

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');
      }
  });
  
});
于 2012-10-01T00:56:34.070 に答える
0

このような？

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

しかし、なぜあなたがこれをやろうとしているのか、私にはよくわかりません。マウスオーバーでテキストを表示および非表示にしようとしているだけですか?

于 2012-10-01T00:32:26.850 に答える
0

HTML構造がどのように見えるか、これの目的などについて多くのデータを持っていません。しかし、以下は、質問が参照しているものを達成する構造の例です。すべての div が同じことを行う場合のすべての 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'));
});

</p>

于 2012-10-01T01:04:33.457 に答える