0

我有这个变量

var item_width = $('#slides li').outerWidth();

并希望将其修改为也包含在内#slides2 li。我是否必须编写两个变量并在各自的函数中使用它们，或者有没有办法将两个 ID 包含在一行中？

我这样做是因为我有两个 div（那个切换），其中包含两个不同的幻灯片轮播，并且我试图尽可能多地共享脚本。

// 编辑推断 //

我在这里遗漏了一些简单的东西，我只知道。第一个 div 没问题，第二个就不行了。我应该改用类吗？（这可能是一个愚蠢的问题，但我对 JS 很陌生）

有相当多的代码，我无法让 jsfiddle 工作，所以我只是在我们的生产站点上发布了一个开发文档。

（网址已删除）

// 编辑 //

没关系，问题出在css上，而不是脚本上。添加clear: both以#slides ul, #slidesTwo ul将它们全部放在单独的行上。他们都漂浮在外面ul

4

4 回答 4

1 
var item_width = $('#slides:visible li,#slides2:visible li').outerWidth();
于 2012-09-05T17:16:00.167 回答
1

outerWidth()如果您想要所选元素的 s 数组...

$('#slides li, #slides2 li').map(function() { return $(this).outerWidth(); });

outerWidth()只会返回一个Number（或null）。

于 2012-09-05T17:24:21.017 回答
1

您可以使用逗号构造一个引用两个“幻灯片”的 jQuery 对象：

var item_width = $('#slides li,#slides2 li').outerWidth();

但是，您可能会发现这不是您要查找的内容，因为它只会给出匹配1的第一个元素的外部宽度。

所以，即使它不仅仅是一行，也许你正在寻找的是：

var item_width = 0;
$('#slides li,#slides2 li').each(function () {
    item_width += $(this).outerWidth();
});

虽然您可以更简单地使用：

var item_width = $('#slides li').outerWidth() + $('#slides2 li').outerWidth();

前一个版本的代码让你以后可以更方便地扩展代码。正如其他人所建议的那样，您可以考虑为每个幻灯片分配一个公共类<li>（例如“slideItem”），然后使用以下代码获取所有幻灯片的总宽度，无论可能有多少：

var item_width = 0;
$('.slideItem').each(function () {
    item_width += $(this).outerWidth();
});

现在，您可能正在寻找最大宽度，而不是总宽度，在这种情况下，代码很容易更改以满足您的需要：

var max_width = 0;
$('.slideItem').each(function () { //modify the selector to suit your needs.
    max_width = Math.max(max_width, $(this).outerWidth());
});
于 2012-09-05T17:31:33.060 回答
0

为了简化选择两张不同的幻灯片，建议确保它们共享一个公共类。在这种情况下，请尝试将类添加slides到它们两者。

var $allSlides = $('.slides');

由于.outerWidth()只会返回集合中第一个元素的宽度，因此您可能需要遍历元素并执行相同的操作。

$allSlides.each(function(index, element) {
    var $this = $(this),
        outerWidth = $this.outerWidth();

    doSomething($this);
});
于 2012-09-05T17:19:11.263 回答