Javascript 基于两次按钮单击显示和隐藏选择框

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

基本上，我所做的是将选择框包装在div标记中，当单击“添加一个”时，我显示另一个位置，当单击“删除位置”时，隐藏该位置

我也有4个选择框的限制，所以当达到4个时，它会显示一个警报，当3个被删除时，它会显示一个警报，表示需要最小1个

我面临的问题是，一旦页面显示，我可以通过单击添加一个位置，但当单击“删除”时，它不会隐藏，直到单击两次，从那时起，如果我再添加一个位置，我会单击两次。谢谢

这是我的密码

var i=2； $.addonemore.clickfunction{ 如果i>4{ 警报您最多只能添加4个位置； }否则{ $'.location-'+i.css{'display'：'table'}； i++； } }; $.rmone.clickfunction{ 如果我<2{ 提醒您至少需要一个位置和颜色； }否则{ $'.location-'+i.css{'display'：'none'}； i-； } }; .pc行{宽度：100%；显示：表格；表格布局：固定；}.pc列{显示：表格单元格；垂直对齐：顶部} .location-2、.location-3、.location-4{显示：无}。引号大小选择{边框：1px实心ccc；字体大小：14px；高度：30px；填充：0 5px} .quote sizes标签{光标：继承；显示：块；宽度：100%；溢出：隐藏；空白：nowrap；页边距底部：10px}。quote sizes标签跨距{字体大小：14px；文本对齐：右；浮点：左；页边距右：3px；垂直对齐：中间；宽度：120px} 添加位置，rm位置{margin:20px 0；width:160px；float:left}添加位置a，rm位置a{文本装饰：无；颜色：000；边框：2px实心990000；字体大小：13px；填充：5px} 3.设计位置和颜色

每件衬衫最多可选择4个位置，每个位置最多可选择4种颜色。基本价格包括第一个位置和一种颜色

选择下面的位置 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖

---

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

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--;
  }
});

---

问题是添加和删除函数需要在不同的元素上操作。通过按照@DanPhilip的建议将i初始化为1，并更改add函数作用的元素，您可以获得正确的行为

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

var i=1； $.addonemore.clickfunction{ 如果i>3{alert，则最多只能添加4个位置；}否则{ $'.location-'++i.css{'display'：'table'}； } }; $.rmone.clickfunction{ 如果i<2{alert，则至少需要一个位置和颜色；}其他{ $'.location-'+i.css{'display'：'none'}.findoption[value=].attr{'selected'：'selected'}； i-； } }; .pc行{宽度：100%；显示：表格；表格布局：固定；}.pc列{显示：表格单元格；垂直对齐：顶部} .location-2、.location-3、.location-4{显示：无}。引号大小选择{边框：1px实心ccc；字体大小：14px；高度：30px；填充：0 5px} .quote sizes标签{光标：继承；显示：块；宽度：100%；溢出：隐藏；空白：nowrap；页边距底部：10px}。quote sizes标签跨距{字体大小：14px；文本对齐：右；浮点：左；页边距右：3px；垂直对齐：中间；宽度：120px} 添加位置，rm位置{margin:20px 0；width:160px；float:left}添加位置a，rm位置a{文本装饰：无；颜色：000；边框：2px实心990000；字体大小：13px；填充：5px} 3.设计位置和颜色

每件衬衫最多可选择4个位置，每个位置最多可选择4种颜色。基本价格包括第一个位置和一种颜色

选择下面的位置 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖 地方 选择位置 丰胸 后卫 左前胸 右前胸 左袖 右袖

---

有两个问题。首先，应该删除索引为-1而不是元素索引的元素。其次，移除限制应为4{ 警报您最多只能添加4个位置； }否则{ $'.location-'+i.css{'display'：'table'}； i++； } }; $.rmone.clickfunction{

---

如果我这样做，那么当我第一次尝试添加或删除位置框时，第二次单击更新了答案。请现在检查。谢谢，我做了一个小更改，即i>3，因为我的第一个位置始终显示，我需要在第三次迭代后显示最大4个位置警报框。再次感谢Hanks，还有一个问题，是否可能le重置选定位置选项，以便在删除位置时选择位置sir@niceoneishere查看我的答案-我编辑它是为了在中添加该功能。@freginold简直太棒了。谢谢Hanks，这就是我在Dan的评论框中所做的事情。我正在尝试扩展它，以禁用所选的选项，每个我选择的位置框n其他。我的意思是，如果我从位置1中选择了一个选项，该选项应在其他3个位置框中禁用，如果在位置2中选择了一个位置，则该选项应在其他3个位置框中禁用。我得到了下面的代码，该代码会执行此操作，但当我删除位置时，它应在位置1中启用禁用选项。此处是我的代码$'select[name*=location]'。changefunction{var selectedOptions=$'select option:selected'；$'select option.removeAttr'disabled'；selectedOptions.eachfunction{var value=this.value；if value！=={var id=$this.parent'select[name*=location]'。prop id'；var options=$'select[name*=location]：非'+id+'选项[value='+value+']'；选项.prop'disabled'，'true'；}；}再次感谢我使用了.prop而不是.attr。再次感谢现在正在禁用左前和右前，如果选择了全胸：这是我的小提琴，我可以禁用左前和右前。再次感谢