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>元素。不幸的是，目前尚不清楚你基于小提琴的结构是什么，所以我无法提供更多帮助。

我建议在众多部分中添加一个类，然后更新代码。对于#Apple示例：

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

然后，您可以使用选择器：

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

最好还使用jQuery的not()函数来创建一些排他性，如下所示：

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

这也消除了以后调用show()。

的需要

Answer 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>

Demo

Answer 3

你有$('div').hide(); - 难怪所有的div都被隐藏了，也许你应该用一些$('#container div').hide();来缩小它？

Answer 4

尝试更改选择器

。
$（ 'DIV'）隐藏（）;

到

$（ '＃苹果'）隐藏（）;

我的javascript隐藏了所有的div。

4 个答案: