javascript - 我的 javascript 隐藏了所有的 div。

Question

所以，这是我的易货计算器。

问题是，当我尝试将它添加到我的网站时，它会因为隐藏所有 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 - check it live

Answer 1

仔分割析代码。 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() 的需要.