文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >显示并隐藏基于2按钮单击的复选框

问显示并隐藏基于2按钮单击的复选框
EN

Stack Overflow用户
提问于 2017-03-24 17:36:46
回答 3查看 632关注 0票数 1

我有四个选择框，默认情况下，我会显示其中一个。在第一个链接中，有两个链接，一个是添加多一个位置，另一个是删除一个位置。

基本上，我所做的是将选择框包装在div标记中，当再添加一个是单击时，我将显示另一个位置，并且当单击remove location时，会隐藏该位置。

我也有4个复选框的限制，所以当到达4个时，显示一个警报，当3个被删除时，显示一个警告，表示至少需要一个

我面临的问题是，一旦页面显示，我可以添加一个位置，只要点击一次，但当点击删除，它不会隐藏，直到2点击，如果我再添加一个，我已经点击两次。谢谢

这是我的密码

​

代码语言：javascript
复制
var i = 2;
$(".addonemore").click(function(){
    if( i > 4){
        alert("You can add only a maximum of 4 locations");
    } else {
        $('.location-'+i).css({'display':'table'});
        i++;
    }
});
$(".rmone").click(function(){
    if( i < 2){
        alert("You need at least one location and color");
    } else {
        $('.location-'+i).css({'display':'none'});
        i--;
    }
});
代码语言：javascript
复制
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
	<h2 class="section-title">3. Design Location & Colors</h2>
	<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
	<div class="pc-row location-1">
	<div class="locations-colors pc-col quote-sizes">
	  <h4>Choose location below</h4>
	   <label for="location_one"><span>Location</span>
	    <select name="location_one" id="location_one" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
	<div class="pc-row location-2">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="location_two"><span>Location</span>
	    <select name="location_two" id="location_two" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
		<div class="pc-row location-3">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="location_three"><span>Location</span>
	    <select name="location_three" id="location_three" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
		<div class="pc-row location-4">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="locatio_four"><span>Location</span>
	    <select name="location_four" id="location_four" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div><br />
  <div class="pc-row">
  <div class="pc-col">
  	<div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
    	<div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
	</div>

​

jquery
html
javascript
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-03-24 18:02:53

问题是添加和删除函数需要对不同的元素进行操作。按照@DanPhilip的建议，在1处初始化i，并更改add函数所操作的元素，就可以得到正确的行为。

以下是一个可行的解决方案：

​

代码语言：javascript
复制
var i = 1;
$(".addonemore").click(function(){
	if( i > 3){alert("You can add only a maximum of 4 locations");}else{
		$('.location-'+ ++i).css({'display':'table'});
	}
});
$(".rmone").click(function(){
	if( i < 2){alert("You need at least one location and color");}else{
		$('.location-'+i).css({'display':'none'}).find("option[value='']").attr({'selected':'selected'});
		i--;
	}
});
代码语言：javascript
复制
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
	<h2 class="section-title">3. Design Location & Colors</h2>
	<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
	<div class="pc-row location-1">
	<div class="locations-colors pc-col quote-sizes">
	  <h4>Choose location below</h4>
	   <label for="location_one"><span>Location</span>
	    <select name="location_one" id="location_one" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
	<div class="pc-row location-2">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="location_two"><span>Location</span>
	    <select name="location_two" id="location_two" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
		<div class="pc-row location-3">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="location_three"><span>Location</span>
	    <select name="location_three" id="location_three" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div>
		<div class="pc-row location-4">
		<div class="locations-colors pc-col quote-sizes">
	   <label for="locatio_four"><span>Location</span>
	    <select name="location_four" id="location_four" class="linked-drop-down">
         <option value="">choose location</option>
		 <option value="Full_Chest">Full Chest</option>
		 <option value="Full_Back">Full Back</option>
         <option value="Front_Left_Chest">Front Left Chest</option>
         <option value="Front_Right_Chest">Front Right Chest</option>
         <option value="Left_Sleeve">Left Sleeve</option>
		 <option value="Right_Sleeve">Right Sleeve</option>		 
        </select></label>
		
	</div>
	</div><br />
  <div class="pc-row">
  <div class="pc-col">
  	<div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
    	<div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
	</div>

​

编辑：对JavaScript进行了修改，以便在隐藏时将select元素返回到其默认选择。

票数 1
EN

Stack Overflow用户

发布于 2017-03-24 17:51:09

这可能是因为我从2开始，尝试用1初始化它，因为最初只有一个选择是可见的，并在显示div之前增加它。

代码语言：javascript
复制
var i = 1;
$(".addonemore").click(function(){
  if( i > 4){
      alert("You can add only a maximum of 4 locations");
  } else {
      i++;
      $('.location-'+i).css({'display':'table'});
  }
});
$(".rmone").click(function(){
  if( i < 2){
      alert("You need at least one location and color");
  } else {
      $('.location-'+i).css({'display':'none'});
      i--;
  }
});
票数 1
EN

Stack Overflow用户

发布于 2017-03-24 18:08:01

有两个问题。首先，您应该删除具有index -1而不是元素索引的元素。其次，删除限制应该是<= 2。

​

代码语言：javascript
复制
var i = 2;
$(".addonemore").click(function(){
    if( i > 4){
        alert("You can add only a maximum of 4 locations");
    } else {
        $('.location-'+i).css({'display':'table'});
        i++;
    }
});
$(".rmone").click(function(){
    if( i <= 2){
        alert("You need at least one location and color");
    } else {
        $('.location-'+(i-1)).css({'display':'none'});
        i--;
    }
});
代码语言：javascript
复制
.pc-row {width: 100%; display: table; table-layout: fixed; }.pc-col {display:table-cell;vertical-align:top}
.location-2,.location-3,.location-4{display:none}.quote-sizes select{border:1px solid #ccc;font-size:14px;height:30px;padding:0 5px}
.quote-sizes label {cursor:inherit;display:block;width:100%;overflow:hidden;white-space:nowrap;margin-bottom:10px}.quote-sizes label span{font-size:14px;text-align:right;float:left;margin-right:3px;vertical-align:middle;width:120px}
#add-location,#rm-location{margin:20px 0;width:160px;float:left}#add-location a,#rm-location a{text-decoration:none;color:#000;border:2px solid #990000;font-size:13px;padding:5px}
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adult-sizes-box">
<h2 class="section-title">3. Design Location & Colors</h2>
<p class="ptext">You can select maximum 4 locations per shirt and Each location can have a maximum 4 colors. The base price includes the First Location and One color</p>
<div class="pc-row location-1">
<div class="locations-colors pc-col quote-sizes">
  <h4>Choose location below</h4>
   <label for="location_one"><span>Location</span>
    <select name="location_one" id="location_one" class="linked-drop-down">
     <option value="">choose location</option>
	 <option value="Full_Chest">Full Chest</option>
	 <option value="Full_Back">Full Back</option>
     <option value="Front_Left_Chest">Front Left Chest</option>
     <option value="Front_Right_Chest">Front Right Chest</option>
     <option value="Left_Sleeve">Left Sleeve</option>
	 <option value="Right_Sleeve">Right Sleeve</option>		 
    </select></label>
	
</div>
</div>
<div class="pc-row location-2">
	<div class="locations-colors pc-col quote-sizes">
   <label for="location_two"><span>Location</span>
    <select name="location_two" id="location_two" class="linked-drop-down">
     <option value="">choose location</option>
	 <option value="Full_Chest">Full Chest</option>
	 <option value="Full_Back">Full Back</option>
     <option value="Front_Left_Chest">Front Left Chest</option>
     <option value="Front_Right_Chest">Front Right Chest</option>
     <option value="Left_Sleeve">Left Sleeve</option>
	 <option value="Right_Sleeve">Right Sleeve</option>		 
    </select></label>
	
</div>
</div>
	<div class="pc-row location-3">
	<div class="locations-colors pc-col quote-sizes">
   <label for="location_three"><span>Location</span>
    <select name="location_three" id="location_three" class="linked-drop-down">
     <option value="">choose location</option>
	 <option value="Full_Chest">Full Chest</option>
	 <option value="Full_Back">Full Back</option>
     <option value="Front_Left_Chest">Front Left Chest</option>
     <option value="Front_Right_Chest">Front Right Chest</option>
     <option value="Left_Sleeve">Left Sleeve</option>
	 <option value="Right_Sleeve">Right Sleeve</option>		 
    </select></label>
	
</div>
</div>
	<div class="pc-row location-4">
	<div class="locations-colors pc-col quote-sizes">
   <label for="locatio_four"><span>Location</span>
    <select name="location_four" id="location_four" class="linked-drop-down">
     <option value="">choose location</option>
	 <option value="Full_Chest">Full Chest</option>
	 <option value="Full_Back">Full Back</option>
     <option value="Front_Left_Chest">Front Left Chest</option>
     <option value="Front_Right_Chest">Front Right Chest</option>
     <option value="Left_Sleeve">Left Sleeve</option>
	 <option value="Right_Sleeve">Right Sleeve</option>		 
    </select></label>
	
</div>
</div><br />
  <div class="pc-row">
  <div class="pc-col">
  	<div id="add-location"><a href="javascript:void(0);" class="addonemore">Add one more location</a></div>
	<div id="rm-location"><a href="javascript:void(0);" class="rmone">Remove one location</a></div>
  </div>
 </div>
</div>

​

JSFiddle：https://jsfiddle.net/haL32cbd/2/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43005836

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档