创建一个可重用的javascript函数

目前，我正在使用下面的函数执行一个简单的幻灯片

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

我希望能够通过在父项“红色牛仔裤”上附加一个类来执行此操作

我在尝试类似的东西

function jeans(selector) {

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

$(selector).hover(

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

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

…但我的语法太糟糕了

如果有人能给我指出正确的方向，我将不胜感激

---

现在的问题是，幻灯片会在我所上的每一个元素上运行。有人能推荐一个只在当前悬停时激活它的修正吗？我想某处需要一个（这个）

谢谢

这是：

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

应该是

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

以及所有其他类似的地方。这样做的目的是查找

ul

选择器中的

ul

元素，如下所示：

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

应该是

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

以及所有其他类似的地方。这样做的目的是在

选择器中查找
ul
元素

只需附加字符串：

$（选择器+ul'）。隐藏（'slow'）
只需附加字符串：
$（选择器+ul'）。隐藏（'slow'）
您可以尝试更新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');

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

我希望这会有所帮助
您可以尝试更新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');

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

我希望这将有助于
有几种方法可以以干净的方式实现这一点：

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

它们都是等价的

一般来说，如果您更频繁地使用选择器，我建议您缓存它们，因为使用内置选择器调用
$（）
可能会非常昂贵。这样，您在重构时可以获得更好的性能和更少的麻烦。

要使幻灯片依赖于当前悬停，请使用
$（this）
而不是常规的
选择器

function(selector){

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

  $element.hide();

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

}

有几种方法可以以干净的方式实现这一点：

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

它们都是等价的

一般来说，如果您更频繁地使用选择器，我建议您缓存它们，因为使用内置选择器调用
$（）
可能会非常昂贵。这样，您在重构时可以获得更好的性能和更少的麻烦。

要使幻灯片依赖于当前悬停，请使用
$（this）
而不是常规的
选择器

function(selector){

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

  $element.hide();

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

}

已经回答了，但这是做同样事情的好方法。您可以像这样创建自己的jQuery插件

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

$.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();

仅供将来参考；）
 已经回答了，但这是做同样事情的好方法。您可以像这样创建自己的jQuery插件

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

$.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();

仅供将来参考；）
 太好了，谢谢你！现在的问题是，幻灯片会在我所上的每一个元素上运行。你知道我只会在当前悬停时激活它吗？@Cordial看看我的答案，这可能是解决方案。@Cordial-我同意christoph的说法-他的看起来像解决方案那太好了，谢谢！现在的问题是，幻灯片会在我所上的每一个元素上运行。你知道我只会在当前悬停时激活它吗？@Cordial看看我的答案，这可能是解决方案。@Cordial-我同意christoph的说法-他的答案看起来像解决方案