1

これについていくらか助けていただければ幸いです。

訪問者がボタンを押して、好みの通貨で価格を表示できるように、3 つのボタンを用意しようとしています。

下の 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

たとえば、#currencypounds のすべての ID を表示しようとする代わりに、クラスを使用してみてください。

ID が #currencypounds、#currencyeuros、#currencydollars のセクションごとに非表示の DIV があります。これらを ID ではなくクラスに変更し、リンクを使用して特定のクラスを表示し、残りのクラスを非表示にします。これをすべて変更する時間はありませんが、理解できるはずです。

于 2013-08-08T13:16:04.313 に答える
1

これは動作中のバージョンです: jsFiddle。

次のことを行いました。

  1. hrefカスタム属性を使用して通貨を保存するために を使用する代わりにdata-targetCurrency(これは、href の動作を防止するために優れています)。

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

  2. を使用する代わりに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をクラスに変更しました。

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

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

id の代わりにクラスを使用します。例:

クラスドルを持つ複数の要素にクラスを与えます。これらの要素を選択するには、

$(".dollar"). たとえば、次のクラスのすべての要素から現在のクラスを削除する必要があります。

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