0

これはばかげた質問かもしれません。サイトで回答を探しましたが、正しく検索されていない可能性があります。

<ul>
   <li id="tab1">1</li>
   <li id="tab2">2</li>
   <li id="tab3">3</li>
</ul>

liクリックするとタブがフェードアウトするコードを作成しようとしています。コードを 1 回記述し、それを 3 つすべてに適用する方法はありますかli。少しでも正しい方向に進んでいるかどうかはわかりません。「ifステートメント」を使用する必要があると考えていましたが、これがこれまでのところ...

(function() {
    var lists = $("ul li");

      for(var i = 0; i < items.length; i++)
    {    
         buttons[i].onclick=(function(){      
         var n = i,
         tabs = $("#tab");  

       return function(){
        tabs + n.click.fadeOut(500) })

         })
    }
})

私はこれが正しいとはほど遠いことを知っていますが、私はこれに完全に困惑しています. これを行うためのより良い方法があるでしょうか。助けてくれてありがとう

4

3 に答える 3

1

はい。答えはあなたが思っているよりも簡単です。核となるのは、可変量のリストを識別する方法です。考えられる解決策:

HTML

<ul>
    <li id="tab1" class="tab">1</li>
    <li id="tab2" class="tab">2</li>
    <li id="tab3" class="tab">3</li>
</ul>

JS

$(".tab").click(function() {
    $(this). //do a function
});

多くの代替方法もありますが、これはあなたの目的には簡単だと思います。value=2などをリスト項目に入れたり、それらを使用して値を識別したり、変数 ID を$('#tab'+varValue).fadeOut('slow')操作したり、ターゲットを絞った後にコードのようなコードやその他の関数を使用したりすることもできます。

于 2013-11-14T01:20:02.460 に答える
1

あなたのコードが何をしようとしているのかはわかりませんが、クリックするとアイテムがフェードします。名前に基づいて、対応するタブをフェードしようとしていると思います-そのタブhtmlを見せてください。この回答を更新します。

$("ul").on("click", "li", function() {
   //guess on fading the tab:
   $("#tabs div").not("." + this.id).fadeOut(500);//fadeout other tabs
   $("#tabs ." + this.id).fadeIn(500); //fade in this tab
})

タブのhtmlが次のような場合、これによりすべてのタブがフェードアウトし、クリックされたタブがフェードインします。

<div id="tabs">
    <div class="tab1">1</div>
    <div class="tab2">2</div>
    <div class="tab3">3</div>
</div>
于 2013-11-14T00:28:59.010 に答える
0

あなたが達成しようとしているより大きな目標はわかりませんが、これはあなたが尋ねたように機能します：

$('li').click(function() {
   $(this).fadeOut(500);
});

jQuery 一致セット (ここでは 3 つの要素すべて) の各メンバーに対して、それぞれliにクリック関数を割り当てます。クリックすると、this参照はクリックされた項目を参照するため、それを jQuery オブジェクトにラップして、フェードアウトすることができます。要素はliクリックするとフェードアウトします。

何か他のことを達成しようとしている場合は、より詳細に説明してください。

あなたのためのいくつかの他のスタイルノート:

  • ループする必要はありません。clickすでに jQuery オブジェクトの各要素にクリック ハンドラーが割り当てられています。
  • onclickjQueryがそれを行うので、使用する必要はありclickません。
  • ループ内に関数を作成しないでください。上記のコードはまさにそれを行っているように見えるかもしれませんが、そうではありません。メソッドに渡される関数のインスタンスを 1 つ作成しますclick。ループ内ではfor、実際には関数の新しいインスタンスを毎回作成しますが、これはベスト プラクティスではありません。
  • ハンドラー関数から関数を返すonclickことは何もしません。
  • は内にある必要があるためli 、 --just look for をul探してセレクターの複雑さを増す必要はありません。'ul li''li'
  • 多くの JavaScript 開発者は、埋め込まれた HTML が二重引用符を使用できるように、JS の文字列に単一引用符を使用することに注意してください。
于 2013-11-14T01:31:06.917 に答える