如何采用硬编码/重复jQuery语法和Condense为动态

Question

我有一个带有一些jQuery代码的网页。现在我正在硬编码我的jQuery语法，以适应数据库表中7行的更新，并预测大约3行的增长。但我不想每天检查我的应用程序，看看数据库表是否增长超过10行，然后必须添加更多硬编码的jQuery语法。

任何人都可以帮我拿jQuery并将其浓缩为真正的动态 - 从而消除它的硬编码特性并使其能够处理任意数量的行吗？感谢。

<style type="text/css">
div.icons {
    clear:both;
    float:left;
    height:24px;
    width:30px;
}
div.content {
    height:24px;
}
div.show {
    display:block;
}
div.hide {
    display:none;
}
input.textbox {
    padding:0;
    margin:0;
    width:300px;
}
input.submitButton {
    padding:0;
    margin:0;
    vertical-align:middle;
}
img.button {
    vertical-align:middle;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('#b-001').on('click', function(){
        //$('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-001-on').toggle();
        $('#d-001-off').toggle();
        $('#d-001-off-focus').focus();
    });
    $('#b-002').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        //$('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-002-on').toggle();
        $('#d-002-off').toggle();
        $('#d-002-off-focus').focus();
    });
    $('#b-003').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        //$('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-003-on').toggle();
        $('#d-003-off').toggle();
        $('#d-003-off-focus').focus();
    });
    $('#b-004').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        //$('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-004-on').toggle();
        $('#d-004-off').toggle();
        $('#d-004-off-focus').focus();
    });
    $('#b-005').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        //$('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-005-on').toggle();
        $('#d-005-off').toggle();
        $('#d-005-off-focus').focus();
    });
    $('#b-006').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        //$('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-006-on').toggle();
        $('#d-006-off').toggle();
        $('#d-006-off-focus').focus();
    });
    $('#b-007').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        //$('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-007-on').toggle();
        $('#d-007-off').toggle();
        $('#d-007-off-focus').focus();
    });
    $('#b-008').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        //$('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-008-on').toggle();
        $('#d-008-off').toggle();
        $('#d-008-off-focus').focus();
    });

    // 2 extra for growth
    $('#b-009').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        //$('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        $('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-009-on').toggle();
        $('#d-009-off').toggle();
        $('#d-009-off-focus').focus();
    });
    $('#b-010').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        $('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        //$('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-010-on').toggle();
        $('#d-010-off').toggle();
        $('#d-010-off-focus').focus();
    });
})
</script>

<div class="content-wrapper">
    <div class="icons"><a id="b-001"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-001-on">Northside</div>
        <div class="hide" id="d-001-off"><input class="textbox" id="d-001-off-focus" name="d-001-off" maxlength="50" type="text" value="Northside" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('001');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-002"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-002-on">South Lawn</div>
        <div class="hide" id="d-002-off"><input class="textbox" id="d-002-off-focus" name="d-002-off" maxlength="50" type="text" value="South Lawn" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('002');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-003"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-003-on">East Wing</div>
        <div class="hide" id="d-003-off"><input class="textbox" id="d-003-off-focus" name="d-003-off" maxlength="50" type="text" value="East Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('003');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-004"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-004-on">West Wing</div>
        <div class="hide" id="d-004-off"><input class="textbox" id="d-004-off-focus" name="d-004-off" maxlength="50" type="text" value="West Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('004');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-005"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-005-on">Lobby</div>
        <div class="hide" id="d-005-off"><input class="textbox" id="d-005-off-focus" name="d-005-off" maxlength="50" type="text" value="Lobby" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('005');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-006"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-006-on">Ground Floor</div>
        <div class="hide" id="d-006-off"><input class="textbox" id="d-006-off-focus" name="d-006-off" maxlength="50" type="text" value="Ground Floor" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('006');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-007"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-007-on">TBD</div>
        <div class="hide" id="d-007-off"><input class="textbox" id="d-007-off-focus" name="d-007-off" maxlength="50" type="text" value="TBD" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('007');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

    <div class="icons"><a id="b-008"><img src="images/add.png" alt="Add button" class="button" title="Add" /></a></div>
    <div class="content">
        <div class="show" id="d-008-on">Add a new location</div>
        <div class="hide" id="d-008-off"><input class="textbox" id="d-008-off-focus" name="d-008-off" maxlength="50" type="text" value="" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('insert');$('#location').val('008');" title="Add" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>

Answer 1

DEMO - 很抱歉这样说，但您的代码很差。

以下是jQuery替换而不更改任何HTML，除了用<div class="content-wrapper"></div>包装“添加新位置”行。

$('.icons a').on('click', function(){
    var $contentWrapper = $(this).closest('.content-wrapper');
    var $siblings = $contentWrapper.siblings('.content-wrapper');
    $siblings.find('.hide').hide('slow');
    $siblings.find('.show').show('slow');
    $contentWrapper.find('.show').toggle();
    $contentWrapper.find('.hide').toggle().find('.textbox').focus();
});

不要忘记在$(function(){ ... });中包含上面的jQuery，以便它只在DOM准备就绪后执行。

Answer 2

我只能同意Coby。

想想尝试一下可能会很有趣。但我不确定这些东西应该如何运作。由于我不应该链接JS Fiddle，你应该使用Coby的代码。

你可以对标记和JS做很多改进。

您是否在代码中包含了某些无JS回退的输入字段？否则你可以使用JS添加它们，而不是那么多标记。许多可能的变化之一。