Question

目前我正在使用以下功能执行简单的幻灯片...

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

...但我的语法很残忍！

如果有人能指出我正确的方向，我们将非常感激！

现在的问题是幻灯片在我上课的每个元素上运行。任何人都可以推荐一个仅在当前悬停时激活它的修改吗？我认为某处需要（这个）...

谢谢！

Answer 1

此：

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

应该是

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

与所有其他类似的地方一起。这样做可以查找ul

中的selector个元素

Answer 2

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

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

}

Answer 3

已经回答了，但这是做同样事情的好方法。您可以像这样创建自己的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();

仅供将来参考;）

Answer 4

只需追加字符串： $(selector + ' ul').hide('slow');

Answer 5

您可以尝试更新JavaScript function，如下所示：

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

我希望这会有所帮助

创建一个可重用的javascript函数

5 个答案: