Question

我有这个变量

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

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

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

// EDITED推断//

我在这里缺少一些简单的东西，我只知道它。第一个div工作没问题，第二个就行不通。我应该使用课程吗？（这可能是一个愚蠢的问题，但我对JS来说很新）

有相当多的代码，我无法让jsfiddle工作，所以我刚刚将dev文档发布到我们的生产网站。

（网址已删除）

//编辑//

没关系，问题在于css，而不是脚本。将clear: both添加到#slides ul, #slidesTwo ul会将它们全部放在一个单独的行中。它们都悬浮在ul

之外

Answer 1

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

Answer 2

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

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

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

Answer 3

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

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

但是，你可能会发现这不是你想要的，因为它只会给第一个元素的外部宽度匹配¹。

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

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

Answer 4

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

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

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

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

    doSomething($this);
});

为两个ID设置一个变量的正确语法

4 个答案: