Question

<div id="fcb_pt_1-1" maxlength="5" >

    <span id="fcb_pt_yt1"> 1<input type="button" value="Remove" id="fcb_pt_yt1-1" /></span><br>

    <span id="fcb_pt_yt2"> 2<input type="button" value="Remove" id="fcb_pt_yt2-1" /></span><br>

    <span id="fcb_pt_yt3"> 3<input type="button" value="Remove" id="fcb_pt_yt3-1" /></span><br> 

    <span id="fcb_pt_yt4"> 4<input type="button" value="Remove" id="fcb_pt_yt4-1"/></span><br>

    <span id="fcb_pt_yt5"> 5<input type="button" value="Remove" id="fcb_pt_yt5-1" /></span><br>

    <span id="fcb_pt_yt6"> 6<input type="button" value="Remove" id="fcb_pt_yt6-1"/></span><br>

    <span id="fcb_pt_yt7"> 7<input type="button" value="Remove" id="fcb_pt_yt7-1"/></span><br>

   <span id="fcb_pt_yt8"> 8<input type="button" value="Remove" id="fcb_pt_yt8-1" /></span><br>

   <span id="fcb_pt_yt9"> 9<input type="button" value="Remove" id="fcb_pt_yt9-1" /></span><br>

   <span id="fcb_pt_yt10"> 10<input type="button" value="Remove" id="fcb_pt_yt10-1"/></span><br>

   <span id="fcb_pt_t1-1"><input type="button" value="Select" id="fcb_pt_t1" /> 1</span>    <br>

   <span id="fcb_pt_t2-1"><input type="button" value="Select" id="fcb_pt_t2"/> 2</span> <br>

   <span id="fcb_pt_t3-1"><input type="button" value="Select" id="fcb_pt_t3" /> 3</span> <br>

   <span id="fcb_pt_t4-1"><input type="button" value="Select" id="fcb_pt_t4"/> 4</span> <br>

   <span id="fcb_pt_t5-1"><input type="button" value="Select" id="fcb_pt_t5"/> 5 </span><br>

   <span id="fcb_pt_t6-1"><input type="button" value="Select" id="fcb_pt_t6"/> 6</span><br>

   <span id="fcb_pt_t7-1"><input type="button" value="Select" id="fcb_pt_t7"/> 7</span><br>

   <span id="fcb_pt_t8-1"><input type="button" value="Select" id="fcb_pt_t8"/> 8 </span><br>

   <span id="fcb_pt_t9-1"><input type="button" value="Select" id="fcb_pt_t9"/> 9</span><br>

   <span id="fcb_pt_t10-1"><input type="button" value="Select" id="fcb_pt_t10"/> 10 </span><br>

CSS：

   #fcb_pt_1-1 {visibility: hidden;}    
     .your_team { visibility: visible;}

这是我的两个包含元素的div。第一个div中的元素是隐藏的。当我单击第二个div上的按钮时，会出现第一个div的元素或跨度。为它编写的jquery就是这个，

$('#fcb_pt_t1').click(function(){ 
     $('#fcb_pt_t1-1').hide(); 
     $('#fcb_pt_yt1').addClass('your_team').show();
      });

   $('#fcb_pt_yt1-1').click(function(){     
      $('#fcb_pt_yt1').hide(); 
      $('#fcb_pt_t1-1').show();
            });



     $('#fcb_pt_t2').click(function(){ 
     $('#fcb_pt_t2-1').hide(); 
     $('#fcb_pt_yt2').addClass('your_team').show();
      });

   $('#fcb_pt_yt2-1').click(function(){     
      $('#fcb_pt_yt2').hide(); 
      $('#fcb_pt_t2-1').show();
            });




$('#fcb_pt_t3').click(function(){ 
     $('#fcb_pt_t3-1').hide(); 
     $('#fcb_pt_yt3').addClass('your_team').show();
      });

   $('#fcb_pt_yt3-1').click(function(){     
      $('#fcb_pt_yt3').hide(); 
      $('#fcb_pt_t3-1').show();
            });



$('#fcb_pt_t4').click(function(){ 
     $('#fcb_pt_t4-1').hide(); 
     $('#fcb_pt_yt4').addClass('your_team').show();
      });

   $('#fcb_pt_yt4-1').click(function(){     
      $('#fcb_pt_yt4').hide(); 
      $('#fcb_pt_t4-1').show();
            });



$('#fcb_pt_t5').click(function(){ 
     $('#fcb_pt_t5-1').hide(); 
     $('#fcb_pt_yt5').addClass('your_team').show();
      });

   $('#fcb_pt_yt5-1').click(function(){     
      $('#fcb_pt_yt5').hide(); 
      $('#fcb_pt_t5-1').show();
            });



$('#fcb_pt_t6').click(function(){ 
     $('#fcb_pt_t6-1').hide(); 
     $('#fcb_pt_yt6').addClass('your_team').show();
      });

   $('#fcb_pt_yt6-1').click(function(){     
      $('#fcb_pt_yt6').hide(); 
      $('#fcb_pt_t6-1').show();
            });




$('#fcb_pt_t7').click(function(){ 
     $('#fcb_pt_t7-1').hide(); 
     $('#fcb_pt_yt7').addClass('your_team').show();
      });

   $('#fcb_pt_yt7-1').click(function(){     
      $('#fcb_pt_yt7').hide(); 
      $('#fcb_pt_t7-1').show();
            });



$('#fcb_pt_t8').click(function(){ 
     $('#fcb_pt_t8-1').hide(); 
     $('#fcb_pt_yt8').addClass('your_team').show();
      });

   $('#fcb_pt_yt8-1').click(function(){     
      $('#fcb_pt_yt8').hide(); 
      $('#fcb_pt_t8-1').show();
            });


$('#fcb_pt_t9').click(function(){ 
     $('#fcb_pt_t9-1').hide(); 
     $('#fcb_pt_yt9').addClass('your_team').show();
      });

   $('#fcb_pt_yt9-1').click(function(){     
      $('#fcb_pt_yt9').hide(); 
      $('#fcb_pt_t9-1').show();
            });




$('#fcb_pt_t10').click(function(){ 
     $('#fcb_pt_t10-1').hide(); 
     $('#fcb_pt_yt10').addClass('your_team').show();
      });

   $('#fcb_pt_yt10-1').click(function(){     
      $('#fcb_pt_yt10').hide(); 
      $('#fcb_pt_t10-1').show();
            });

这是为选择和隐藏元素而编写的jquery。我想要做的是，限制要选择的元素的长度。由于第二个div中有10个元素，因此我应该只能选择应该在第二个div中显示的任何5个元素。如果问题不清楚，我可以编辑并更具体。谢谢。

Answer 1

首先，您应该使用this关键字进行一些重构，而不必重复代码。

其次，重构点击事件，以便跟踪数组中选定的ID。选择元素时，在数组中添加和删除。然后，如果长度>限制然后实际上不选择该元素。

使用jquery限制div中元素的长度

1 个答案: