0

私はしばらくの間、この機能を機能させようとしています。デフォルトで非表示になっている 11 の異なる div があります。それぞれに「トリガー」ボタンがあり、それらをポップして開くようになっています。これは、特定の div ごとに長い一連の関数を使用して行うことができました (最終的には約 175 行のコードになりました!)。私はそれを同じことをする単一の関数に凝縮したかった.

これが今の私のスクリプトです

 $(document).ready(function() {

    $("[class^='ShowVehicles']").toggle(function() {
    alert("click happened");
        $("[class^='HiddenVehicles']").slideDown(1000);

             }, 
        function () {
        $("[class^='HiddenVehicles']").slideUp(1000);


    });


});

現在、すべての「HiddenVehicles」div を開いており、より具体的にする必要があります。私はjqueryにかなり慣れていないので、アイデアがほとんどありません。よろしくお願いします！

編集 - すべての助けてくれてありがとう、これが私が思いついた解決策です:

 $(document).ready(function() {

    $("div.WrapIt").toggle(

    function(){ $(".HiddenVehicles", this).slideDown(1000);
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
     },

    function(){ $(".HiddenVehicles", this).slideUp(1000);
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif")
    }

);

  $(".ShowEveryThing").toggle(
 function() { $(".WrapIt .HiddenVehicles").slideDown(1000);
 $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif");
 $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideBtn.gif");
  },
   function(){ $(".WrapIt .HiddenVehicles").slideUp(1000);
    $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif");
    $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowBtn.gif");
   });

});

ラッパー div を作成し、その div がクリックされたときに関数を起動しました。また、画像の交換とすべての機能を表示する機能も含めました。

4

3 に答える 3

0

これを試して：

<span class="header">Item1</span>
<p style="display: none;">This is the content of item1...</p>
<span class="header">Item2</span>
<p style="display: none;">This is the content of item2...</p>

$(".header").click(function() { $(this).next("p").slideToggle("slow"); });
于 2009-11-20T15:59:54.387 に答える
0

やりたいことは、<div>定義した関数内から特定への参照を取得することです。定義された関数内で、$(this) を使用してボタンへの参照を取得できるはずです。フォーマットに応じて、今すぐ取得できるはずです

あなたのマークアップが次のとおりだとします。

<div>
    <input type="button" class="ShowVehicles" />
    <div class="HiddenVehicles"></div>
</div>

コードを次のように変更できます。

$(".ShowVehicles").toggle(function() {
        $(this).siblings(".HiddenVehicles").slideDown(1000);
    }, 
    function () {
        $(this).siblings(".HiddenVehicles").slideUp(1000);
    }
});

ここで重要なのは への呼び出しですsiblings()。これにより、ボタンの「次」にあるすべての要素が返されます (そして、クラス HiddenVehicles でフィルター処理されます) <div>。ただし、それらが互いにどのように配置されているかによっては、他のjQuery トラバース関数のいずれかを使用する必要がある場合があります。

于 2009-11-20T15:48:51.990 に答える
0

何らかの形で表示/非表示ボタンを、それらが動作するそれぞれの div に結び付ける必要があります。

これを行うには、それらを単一の<LI>要素内にカプセル化するか、共通の ID を与えて、どのボタンがどの div を制御するかを識別します。

次に<LI>例を示します。

<ul id="playground">
  <li>
    <div>HELLO WORLD 1</div>
    <button>Show/Hide 1</button>
  </li>
  <li>
    <div>HELLO WORLD 2</div>
    <button>Show/Hide 2</button>
  </li>
  <li>
    <div>HELLO WORLD 3</div>
    <button>Show/Hide 3</button>
  </li>
</ul>

jQuery の機能は次のようになります。

jQuery("#playground button").click(function(){
  $(this).closest("div").toggle()
})

JS コードは HTML 構造に大きく依存するため、大幅に異なるものにする場合は、jQuery セレクターの一部を調整する必要があります。

于 2009-11-20T15:56:06.643 に答える