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

小提琴 - 现场检查

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 回答