1

だから、これが私の小さな物々交換計算機です。

問題は、それを自分のサイトに追加しようとすると、すべての div が非表示になってしまうことです。(文字通り、それらすべてに display:none を適用します)。

どうすればこれを機能させることができますか？

さらに、現在のように動的ではなく、送信ボタンを押した後にスクリプトに値を計算させたいと思います。それを行う簡単な方法はありますか？

これは次のようになります (サンプル、完全なコードについては、jsfiddle に移動し、下部にリンクがあります):

<div id="Apple">
    <ul>
        <li><span data-val="2"></span> bananas</li>
        <li><span data-val="3"></span> oranges</li>
    </ul>
</div>

そして、これは私のJSです

$(document).ready(function () {
    function showTab(name) {
        $('div').hide();
        var $div = $('#' + name).show();
        var number = parseInt($('.number').val(), 0);
        $('span', $div).each(function() {
            $(this).text($(this).data('val') * number);
        });
    }

    $('#dropdown').change(function () {
        showTab($(this).val());
    });

    showTab($('#dropdown').val());
});

Fiddle - ライブでチェック

4

4 に答える 4

4

コードを注意深く分析します。このshowTab()関数は、サイトのすべてのdiv を非表示にします。

$('div').hide();

そして、それはあなたのタブに一致するものを示しています:

var $div = $('#' + name).show();

最初のセレクターを独自のマークアップにもう少し具体的なものに変更する必要があります。そうしないと、引き続き他の<div>要素が非表示になります。残念ながら、Fiddle に基づいて使用している構造が明確ではないため、これ以上のことはできません。

多数のセクションにクラスを追加してから、コードを更新することをお勧めします。例#Apple:

<div id="Apple" class="tab">

次に、セレクターを使用できます。

$('div.tab').hide();

jQuery のnot()関数も使用して、次のように排他性を作成することをお勧めします。

$('div.tab').not('#'+name).hide();

これにより、後で を呼び出す必要もなくなりますshow()。

于 2013-11-05T14:01:54.047 に答える
2

$('div').hide();ページ上のすべての div を非表示にします。具体的に：

$('div.fruit').hide();

<div id="Apple" class="fruit">
    <ul>
        <li><span data-val="2"></span> bananas</li>
        <li><span data-val="3"></span> oranges</li>
    </ul>
</div>

デモ

于 2013-11-05T14:02:39.263 に答える
0

セレクターを変更してみてください

$('div').hide();

に

$('#Apple').hide();

于 2013-11-05T14:01:57.820 に答える
0

あなたが持っている$('div').hide();- すべての div が隠されているのも不思議ではありません$('#container div').hide();。

于 2013-11-05T14:01:02.880 に答える