Question

在我的定期炼金术游戏的原子标签中，我有一些下拉菜单，允许用户选择原子中需要多少质子，中子和电子。如果用户击中某个原子，比如氢，（1个质子，1个中子，1个电子），那么应该出现“氢：1”这个文字，表示你已经发现了氢。不幸的是，我在Bootstrap Information网站上找不到任何东西：getboostrap.com
除了莫德尔斯，这不符合我的需要。有解决方案吗？

Answer 1

这不是引导功能。您可以使用CSS隐藏文本：display: none;。您可以使用jQuery .show()显示它。

Answer 2

这符合您的需求吗？

<强> JSFiddle

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

在Bootstrap中创建隐藏文本（然后显示它）？

2 个答案: