如何使硬编码/重复jQuery语法和压缩成为动态 [英] How To Take Hard-Coded/Repetitive jQuery Syntax and Condense to be Dynamic
本文介绍了如何使硬编码/重复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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('001');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('002');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('003');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('004');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('005');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('006');" title="Update" type="image" /> <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" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('007');" title="Update" type="image" /> <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="" /> <input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('insert');$('#location').val('008');" title="Add" type="image" /> <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语法和压缩成为动态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
