jquery - 如何将硬编码/重复的 jQuery 语法和浓缩成动态的

Question

我有一个带有一些 jQuery 代码的网页。现在，我正在对我的 jQuery 语法进行硬编码，以适应对 DB 表中 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>

score 2 · Accepted Answer

DEMO——很抱歉这么说，但你的代码很糟糕。

以下是不更改任何 HTML 的 jQuery 替换，除了用<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();
});

不要忘记将上面的 jQuery 包装起来，$(function(){ ... });以便它只在 DOM 准备好后执行。

score 0 · Accepted Answer

我只能同意科比。

想试试我的手可能会很有趣。但我不确定这些东西应该如何工作。因为我不应该链接 JS Fiddle，所以你应该使用 Coby 的代码。

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

您是否在代码中包含某种无 JS 后备的输入字段？否则，您可以使用 JS 添加它们而没有那么多标记。许多可能的变化之一。

jquery - 如何将硬编码/重复的 jQuery 语法和浓缩成动态的

2 回答 2

Related

Reference