0

現時点では、以下の関数を使用して簡単なスライドを実行しています...

function jeans(jean, links) {

$(links).hide();

$(jean).hover(

  function() {
        $(links).show('slow');
    },

  function() {
        $(links).hide('slow');
});}

そして、必要な場所でそれを呼び出します...

jeans('#red-jeans', '#red-jeans ul');
jeans('#blue-jeans', '#blue-jeans ul');
jeans('#yellow-jeans', '#yellow-jeans ul');

親「#red-jeans」にクラスを付けるだけでこれを実行できるようにしたいと思います。

私は何かを試しています

function jeans(selector) {

$(selector 'ul').hide();

$(selector).hover(

  function() {
        $(selector 'ul').show('slow');
    },

  function() {
        $(selector 'ul').hide('slow');
});}

...しかし、私の構文はひどいです!

誰かが私を正しい方向に向けることができれば、それは非常にありがたいです!

問題は、クラスを持っているすべての要素でスライドが実行されることです。現在のホバーでのみアクティブにする修正を推奨できる人はいますか? どこかで (これ) が必要だと思います...

ありがとう！

4

5 に答える 5

3

これ：

$(selector 'ul').hide();

する必要があります

$('ul', selector).hide();

他のすべての同様の場所と一緒に。ulこれが行うことは、要素を検索することですselector

于 2012-08-10T10:03:42.613 に答える
1

これをクリーンな方法で実現する方法はいくつかあります。

$(selector).find('ul')
$(selector + ' ul')
$('ul', selector)

すべて同等です。

一般に、セレクターを頻繁に使用する場合は、セレクターをキャッシュすることをお勧めします。これ$()は、セレクターを内部で呼び出すと非常にコストがかかる可能性があるためです。これにより、パフォーマンスが向上し、リファクタリング時のトラブルが少なくなります。
スライドを現在のホバーに依存させる$(this)には、一般の代わりにを使用しますselector。

function(selector){

  var $element = $('ul', selector);

  $element.hide();

  $(selector).hover(
    function() {
        $(this).find('ul').show('slow');
      },
    function() {
        $(this).find('ul').hide('slow');
  });

}
于 2012-08-10T10:15:27.397 に答える
1

すでに回答済みですが、これは同じことを行う良い方法です。このような独自のjQueryプラグインを作成できます...

$.fn.jeans = function() {
    $(this).find("ul").hide();
    $(this).hover(
        function() {
            $(this).find("ul").show('slow');
        },
        function() {
            $(this).find("ul").hide('slow');
        }
    );
}

適用する要素を選択して呼び出し、通常の jQuery 関数のように使用します...

$("#red-jeans, #blue-jeans, #yellow-jeans").jeans();

今後の参考のために;）

于 2012-08-10T10:27:21.677 に答える
0

文字列を追加するだけです： $(selector + ' ul').hide('slow');

于 2012-08-10T10:08:51.487 に答える
0

function以下のように JavaScript を更新してみてください。

function jeans(selector) {

  // you will have to use 'find' and it wil only be for the first 'ul' as well
  $(selector).find('ul:first').hide();

  $(selector).hover(

    function() {
      $(selector).find('ul:first').show('slow');
    },

    function() {
      $(selector).find('ul:first').hide('slow');
  });
}

そして、このように呼び出します...

jeans('#red-jeans');
jeans('#blue-jeans');
jeans('#yellow-jeans');

これが役立つことを願っています

于 2012-08-10T10:09:25.843 に答える