0

現在ホバーされている ul 内に入力フィールドを表示しようとしています。このコードの種類は次のとおりです。

$('ul').hover(function(){
  $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>');
},
function () {
      $(this).find("input:last").fadeOut('fast');
      $(this).find("button:last").fadeOut('fast');
    }

);

ただし、すべての親の入力フィールドも表示されます:/

find で親から div を削除しようとしました

      $(this).parents().find("input:last").fadeOut('fast');

しかしもちろん、そのコードは、現在ホバリングされている ul の中にあるものも見つけます...

ここに画像の説明を入力

4

3 に答える 3

0

あなたの意見のおかげで、私はアプローチを多少変更しましたが、今では十分に機能しています。

これまでの ul の最後に入力フィールドを追加しました。cssで非表示にする現在ホバーされているものだけがアクティブなクラスを持つようにし（親と子からクラスを削除します）、クラスがアクティブなulの直接の子であるdivのみを表示します:)

$('ul').hover(function(){
      $(this).addClass('active');
      $(this).parents().removeClass('active');
      $(this).children().removeClass('active');
    }, function(){
      $(this).removeClass('active');
    });

HTML

<ul class="tasks tasks-20">
<div><input type="text"> <button>Add main task</button></div></ul>
</li>
<div><input type="text"> <button>Add goal</button></div></ul><ul class="goals"><h2>The public</h2>

<li><span>: :</span>Follow our journey
<ul class="tasks tasks-24">
<div><input type="text"> <button>Add main task</button></div></ul>
</li>
<div><input type="text"> <button>Add goal</button></div></ul>

CSS

 ul.active>div{
            display: block;
    }
于 2012-10-14T06:59:08.430 に答える
0

これは次の理由で発生します。

の子ulは の一部なulのでinput、それらに追加されます

条件を使用できます

好きhasClassか好きかul>li

于 2012-10-14T06:43:36.440 に答える
0

あなたはULに追加されているので、すべてのULで機能するので、追加したいULを指定してみてください

より簡単なアプローチは、ulにidまたはを追加することですclass

$('#one').hover(function(){
  $(this).append('<div style="display: block;"><input type="text"> <button>Knapp></button></div>');
},
function () {
      $(this).find("input:last").fadeOut('fast');
      $(this).find("button:last").fadeOut('fast');
    }

);
于 2012-10-14T06:37:16.013 に答える