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

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

任何人都可以帮助我把我的jQuery和浓缩它真正动态 – 从而删除它的硬编码性质，并使其能够处理任意数量的行？ 谢谢。

 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; }   $(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(); }); })  
 
 
 
Northside
 
  
 
 
 
 
 
 
South Lawn
 
  
 
 
 
 
 
 
East Wing
 
  
 
 
 
 
 
 
West Wing
 
  
 
 
 
 
 
 
Lobby
 
  
 
 
 
 
 
 
Ground Floor
 
  
 
 
 
 
 
 
TBD
 
  
 
 
 
 
 
Add a new location
 
  
  

Answer 1

演示 – 很抱歉这样说，但你的代码很差。

以下是jQuery替换而不更改任何HTML，除了用

包装“添加新位置”行。

 $('.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准备好后才会执行。

Answer 2

我只能同意Coby。

想想尝试一下它可能很有趣。 但我不确定这些东西应该如何运作。 因为我不应该链接JS Fiddle，所以你应该选择Coby的代码。

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

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