Question

我是jQuery的新手，以及它使用的方式，所以请事先原谅我。

我正在创建一个常见问题解答页面，我正在使用jQuery将div切换为打开/关闭点击...我的第一个问题是尝试压缩正在使用的代码量，正如您所看到的在下面列出的代码示例中jsfiddle也是如此！有相当数量的JS，每个div都有一个单独的id，这有点乱。

非常感谢提前。

＆＃13;

$('#logon').click(function()
	{
		$('.logonanswer').slideToggle("fast");
		$('.ecrfanswer').hide(1000);
	});
	$('#ecrf').click(function()
	{
		$('.ecrfanswer').slideToggle("fast");
		$('.logonanswer').hide(1000);
	});
	$('#user').click(function()
	{
		$(".user").slideToggle("fast");
	});
	$('#password').click(function()
	{
		$(".password").slideToggle("fast");
	});
	$('#memorable').click(function()
	{
		$(".memorable").slideToggle("fast");
	});
	$('#disabled').click(function()
	{
		$(".disabled").slideToggle("fast");
	});
	$('#training').click(function()
	{
		$(".training").slideToggle("fast");
	});
	$('#ecrftest').click(function()
	{
		$(".ecrftest").slideToggle("fast");
	});
	$('#dropdown').click(function()
	{
		$(".dropdown").slideToggle("fast");
	});
	$('#check').click(function()
	{
		$(".check").slideToggle("fast");
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<article style="text-align:left;">
	<h1>Please select your issue</h1>

	<button class="btn btn-b btn-ba icon-key" id="logon">Issues logging in to Syneclin.net</button>
	
	<div class="logonanswer" style="display:none;">
		<p class="expand">
			<li class="lst lst-b lst-ba icon-go" id="user">I have lost my User ID</li>
				<p class="user" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="password">I have lost my Password</li>
				<p class="password" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="memorable">I have lost my Memorable Data</li>
				<p class="memorable" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="disabled">My account has been disabled</li>
				<p class="disabled" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="training">Training??</li>
				<p class="training" style="display:none;">Insert some blurb here about user ID's</p>
		</div>
	</div>

	<button class="btn btn-b btn-ba icon-page" id="ecrf">Issues entering data / accessing eCRF's</button>

	<div class="ecrfanswer" style="display:none;">
		<div class="expand">
			<li class="lst lst-b lst-ba icon-go" id="ecrftest">eCRF Test Page</li>
				<p class="ecrftest" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="dropdown">I can't delete information in a dropdown menu</li>
				<p class="dropdown" style="display:none;">Insert some blurb here about user ID's</p>
			<li class="lst lst-b lst-ba icon-go" id="check">I can't remove a check from a checkbox</li>
				<p class="check" style="display:none;">Insert some blurb here about user ID's</p>
		</div>
	</div>
	
	<div class="footer">
		
	</div>
</article>

＆＃13;

Answer 1

我更新了你的小提琴：http://jsfiddle.net/qLcxquje/5/

以下是代码：

$(function(){
    // a list of ids also used as classes
    var listOfIds = ["user", "password", "memorable", 
                     "disabled", "training", "ecrftest", 
                     "dropdown",  "check" ];

    $('#logon').click(function()
    {
        $('.logonanswer').slideToggle("fast");
        $('.ecrfanswer').hide(1000);
    });

    $('#ecrf').click(function()
    {
        $('.ecrfanswer').slideToggle("fast");
        $('.logonanswer').hide(1000);
    });

    // convert JavaScript array to a jQuery array
    var jqueryArr = $.makeArray(listOfIds);
    // map each id to it's corresponding class 
    // and bind the click functionality
    $.map(jqueryArr, function(value, index) {
         $("#" + value).click(function()
         {
            $("." + value).slideToggle("fast");
         });
    });
});

您的ID及其相应的类匹配是好的，否则此代码段将无效。请参阅我在代码中添加的注释/功能的注释。我将JavaScript数组转换为jQuery对象，以便我可以使用jQuery的map功能。

这是另一个不使用id数组（jsfiddle）的答案：

// another solution without the id array
$(function(){
    $('#logon').click(function()
    {
        $('.logonanswer').slideToggle("fast");
        $('.ecrfanswer').hide(1000);
    });

    $('#ecrf').click(function()
    {
        $('.ecrfanswer').slideToggle("fast");
        $('.logonanswer').hide(1000);
    });

    // gets the div (the one with expand class) 
    // under the div with class name logonanswer 
    var childDivOfLogonAnswer = $(".logonanswer").children().first();   
    // iterates on all li children only
    $.each(childDivOfLogonAnswer.children('li'), function(index, value) {
        // get the id
        var id = $(value).attr('id');
        // attach click
        $("#" + id).click(function()
        {
            $("." +id).slideToggle("fast");
        });
    });    

    $.each($(".ecrfanswer").children().first().children('li'),
     function(index, value) {
        // get the id
        var id = $(value).attr('id');
        // attach click
        $("#" + id).click(function()
        {
            $("." +id).slideToggle("fast");
        });
    });
});

不要忘记将<p class="expand">（在<div class="logonanswer" style="display:none;">下）更改为<div class="expand">，以使此代码段生效

冷凝jQuery slidetoggle功能

1 个答案: