使用 jQuery 定位多个 div答案

【问题标题】：Target multiple divs with jQuery使用 jQuery 定位多个 div
【发布时间】：2013-08-10 05:10:09
【问题描述】：

我无法告诉您在这方面我会多么感激一些帮助。

我正在尝试使用三个按钮，以便访问者可以按下一个按钮并以他们喜欢的货币显示价格。

我了解如何使用下面的一列执行此操作但是正如您将看到的，当我将其应用于多列时，只有第一个有效（单击按钮时会切换价格）。

我了解 html 中的 id 不能重复，这可能是问题的根源。 但我不知道如何才能使定位在 ID 以外的其他对象上起作用。

我已将所有代码粘贴到此小提琴中：http://jsfiddle.net/Rd7mV/ - 请注意，应更改的价格在小提琴上以红色突出显示。

javascript在这里：

jQuery("#menu a").click(function () {
    var link = jQuery(this).attr('href');
    var showIt = jQuery(link);
    var hideIt = jQuery(".cc.current");

    hideIt.fadeOut(100, function () {
        hideIt.removeClass("current");
        showIt.addClass("current");
        showIt.fadeIn(100);
    });
});

请，如果有人可以提供帮助，这将是一个救命稻草。我搜索了高低，只是真的需要一些实施方面的帮助。

谢谢。 AB。

【问题讨论】：

我不明白你需要什么，你的 jsfiddle 似乎工作得很好。
var showIt = jQuery(link);为什么要将 URL 传递给 $() ？
谢谢大家。 @Dunno 它不起作用。再看二三四红价。当您单击按钮时，它们会消失。只有第一个有效。病毒 721。不明白你的意思？请问你有什么推荐的？
@Andrew Brown 啊，你是对的！一开始我没注意到！
@Dunno 是的。请问您能帮忙吗？

标签： javascript jquery html dynamic-content

【解决方案1】：

这是一个工作版本：jsFiddle。

做了以下事情：

使用自定义属性data-targetCurrency 代替使用href 存储货币（这样可以更好地防止href 的行为）：
```
<a href="javascript: void(0);" data-targetCurrency="currencyeuros"><button class="btn btn-danger">
```
没有使用id，而是使用了另一个自定义属性data-currency：
```
<div class="cc" data-currency="currencyeuros">&euro;159</div>
```

将 javascript 更改为：

jQuery("#menu a").click(function () {
    var currency = jQuery(this).attr('data-targetCurrency');
    var showIt = jQuery("[data-currency=" + currency + "]");
    var hideIt = jQuery(".cc.current");

    hideIt.fadeOut(100, function () {
        hideIt.removeClass("current");
        showIt.addClass("current");
        showIt.fadeIn(100);
    });
});

注意：

属性的jQuery选择器是jQuery("[attributename = attributevalue]")

【讨论】：

谢谢你！它似乎适用于欧元和英镑按钮，但不适用于美元。有什么理由吗？
固定here。您在 html 中的美元价格之前缺少美元符号。
太棒了。好棒！希望我能理解 jQuery 非常感谢您的帮助。
我编辑了我的帖子并在自定义属性前面加上了“data-”前缀，因为这是根据this discussion on SO 执行的方法。小提琴的最终版本在帖子中。
我将使用 removeClass 和 addClass 函数在“点击”中切换按钮的类，就像使用 hideIt 和 showIt 元素一样。您可能会使用“btn-danger”和“btn-success”类，因为您似乎正在使用 Bootstrap :)

【解决方案2】：

例如，不要尝试显示 #currencypounds 的所有 ID，而是尝试使用类。

您已为 ID 为 #currencypounds、#currencyeuros、#currencydollars 的每个部分隐藏了 DIV。将它们更改为类而不是 ID，然后使用您的链接显示特定类并隐藏其余类。我没有时间为你改变这一切，但你应该能够弄清楚。

【讨论】：

这正是我需要的建议 - 我只是不知道要更改哪些位。我是 jQuery 的新手（也许我被它弄糊涂了）。你有什么可以帮忙的吗？感谢您的宝贵时间。

【解决方案3】：

使用类代替id，例如，

您将一个类赋予多个具有类美元的元素。您现在可以通过以下方式选择这些元素，

$(".dollar")。现在，例如，您需要从所有具有类美元的元素中删除当前类，使用，

$(".dollar").removeClass('current');

【讨论】：

非常感谢您的帮助。无论如何，您可以分叉小提琴并快速更新以显示您的意思吗？

【解决方案4】：

我会研究数据属性。显然，您的 jQuery 只是针对第一项，而不是全部。看看针对多个 div 的小提琴。

jQuery Show and Hide multiple divs with a selected class

http://jsfiddle.net/fKHsB/

jQuery(function() {
jQuery('.buttons a').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
    var target = $(this).data('target');
    if (target === 'all') {
        jQuery('.targetDiv').show();
    } else {
        jQuery('.targetDiv').hide();
        jQuery('#div' + target).show();
    }
});

});

【讨论】：

【解决方案5】：

是的，您的问题是您有多个具有相同 id 的元素。您需要引用类而不是 id。

我已经修改了您的小提琴以使其正常工作。我将 id 更改为 classes。

http://jsfiddle.net/kMYye/1/

<div class="cc current currencypounds">&pound;1369</div>

【讨论】：

嗯，我好像忘记保存那个小提琴了。很抱歉。
谢谢奥斯卡，非常感谢 :)