在Bootstrap中创建隐藏文本(然后显示它)？

Question

在我的周期性炼金术游戏的原子选项卡中，我有一个下拉列表，允许用户选择他们的原子中需要多少质子、中子和电子。如果用户点击某个原子，比方说氢，(1个质子，1个中子，1个电子)，那么文本“氢: 1”应该出现，表示你发现了氢。不幸的是，我在Bootstrap Information网站上找不到任何东西: getboostrap.com

除了情态语气，这不符合我的需要。对此有解决方案吗？

Answer 1

这不是bootstrap特性。您可以使用CSS：display: none;隐藏文本。您可以使用jQuery .show()显示它。

Answer 2

这能满足你的需求吗？

HTML：

<select class="selection" id="protons">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="selection" id="neutrons">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select class="selection" id="electrons">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="1">Hydrogen</div>
<div class="atom hide" data-protons="1" data-neutrons="1" data-electrons="2">Whatever</div>

JS：

$('.selection').change(function() {
    $('.atom').addClass('hide');
    $('.atom[data-protons=' + $('#protons').val() + '][data-neutrons=' + $('#neutrons').val() + '][data-electrons=' + $('#electrons').val() + ']').removeClass('hide');
});