Question

我有这个功能可以在点击时切换文本的显示，但我在我的应用程序中有大约5种不同的内容，其中所有内容都被称为不同的ID，有没有办法这样做而无需创建5种不同的功能？

这是我尝试这样做的ID，但我不确定如何没有，但是我在做所有事情时得到的问题是它将同时切换所有5个，当它意味着是一个1

＆＃13;

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

＆＃13;

或者，在vb.net中有不同的方法吗？

感谢所有帮助：）

Answer 1

您可以在复选框中添加data-属性，其中包含您要切换的元素的ID。

（请注意，我将ID isAgeSelected更改为类; ID应始终是唯一的，因为JavaScript只会选择它找到的ID的第一个实例。）

$('.isAgeSelected').click(function() {
    $($(this).data('toggle')).toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" data-toggle="#txtAge" class="isAgeSelected"/>
<input type="checkbox" data-toggle="#txtAge2" class="isAgeSelected"/>

<div id="txtAge" style="display:none">Age is something</div>
<div id="txtAge2" style="display:none">Age is nothing</div>

Answer 2

您不需要ID来选择复选框，而是使用通用类。

此解决方案依赖于文本是复选框的下一个兄弟这一事实。

＆＃13;

$('.isAgeSelected').click(function() {
    $(this).next().toggle(this.checked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">1Age is something</div>

<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">2Age is something</div>

<input type="checkbox" class="isAgeSelected"/>
<div class="txtAge" style="display:none">3Age is something</div>

＆＃13;

Answer 3

使用功能。像这样：

function doSomething(firstObjectSelector, secondObjectSelector){
        $(firstObjectSelector).click(function() {
            $(secondObjectSelector).toggle(this.checked);
        });
}

用法：

doSomething('#isAgeSelected', '#isAgeSelected'); //using ids

或

doSomething('.isAgeSelected', '.isAgeSelected'); //using classes

或

doSomething('div', 'span'); //using tags

css jquery复选框切换显示

3 个答案: