1

我无法告诉你我会多么感激一些帮助。

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

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

我知道 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。

4

5 回答 5

1

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

jQuery 使用选定的类显示和隐藏多个 div

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

});

于 2013-08-08T13:26:09.683 回答
1

这是一个工作版本：jsFiddle。

做了以下事情：

  1. 而不是使用href自定义属性来存储货币data-targetCurrency（这更好地防止了 href 的行为）：

    <a href="javascript: void(0);" data-targetCurrency="currencyeuros"><button class="btn btn-danger">

  2. 而不是 using id，而是使用另一个自定义属性data-currency：

    <div class="cc" data-currency="currencyeuros">&euro;159</div>

  3. 将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]")

于 2013-08-08T13:24:32.593 回答
1

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

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

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

<div class="cc current currencypounds">&pound;1369</div>
于 2013-08-08T13:29:04.163 回答
1

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

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

于 2013-08-08T13:16:04.313 回答
1

使用类而不是 id，例如，

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

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

$(".dollar").removeClass('current');
于 2013-08-08T13:22:09.587 回答