如何使硬编码

如何使硬编码

关注
发信
关注(28)粉丝(399)

如何使硬编码/重复jQuery语法和压缩成为动态

本文介绍了如何使硬编码/重复jQuery语法和压缩成为动态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a web page with some jQuery code. Right now I am hardcoding my jQuery syntax to accommodate for updates to 7 rows in a DB Table and also to anticipate growth of about 3 more rows. But I don't want to check my app daily to see if the DB Table has grown beyond 10 rows and then have to add more hardcoded jQuery syntax.

谁能帮助我使用我的jQuery并将其压缩为真正的动态-从而消除它的硬编码性质并使其能够处理任意数量的行?谢谢.

Can anyone help me take my jQuery and condense it to be truly dynamic -- thus removing the hardcoded nature of it and enable it to handle any number of rows? Thanks.

<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>

推荐答案

演示 —很抱歉，您的代码很糟糕.

DEMO — Sorry to say this, but your code is poor.

以下是jQuery的替代品，没有更改您的任何HTML，除了用<div class="content-wrapper"></div>包装添加新位置"行.

Following is the jQuery replacement without changing any of your HTML, except for wrapping the "Add a new location" row with <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准备好后才执行.

Don't forget to wrap the above jQuery in $(function(){ ... }); so that it only executes once the DOM is ready.

这篇关于如何使硬编码/重复jQuery语法和压缩成为动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-21 03:24
Powered by LMLPHP ©2024 如何使硬编码 0.040724