单击鼠标

Question

我只想在用户点击“添加其他”按钮时显示此类框。如果他再次点击，我只想显示另一个框（最多3个框），如果他超过该数量（3个框），需要“添加另一个”按钮被禁用。

目前，只需点击一下鼠标即可显示一个方框。我尝试使用像这样的数据目标属性，它工作正常，但它只显示一个框。

代码段

$(".add-box").click(function() {
  $(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2 
});

$(".claim-btn-close").click(function() {
  $(this).parent().hide();
});

.add-box-wrap1 {
  position: relative;
  display: inline-block;
}

.claim-btn-close {
  top: -7px;
  position: absolute;
  right: 34px;
  padding: 5px;
  border: 2px solid #e46a5d;
  border-radius: 50%;
  color: #e46a5d;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn claim-btn">Claim 1</a>
</div>

<div class="add-box-wrap2" style="display: none;">
  <div class="claim-btn-close">
    <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn claim-btn">Claim 2</a>
</div>

<div class="form-group add-form">
  <label for="" class="control-label"></label>
  <div class="add-btn">
    <div class="col-md-10">
      <a class="add-box" data-target="1">Add another&ensp;<i class="fa fa-plus">
       </i></a>
    </div>
  </div>
</div>

这里我在jsfiddle中发布了示例它可能导致数据属性？因为“添加另一个”按钮具有data-target =“1”，所以它只显示与add-box-wrap1框相关联。那么逐个展示3个盒子的最佳解决方案是什么？

Answer 1

只需给出两个框的公共类名，然后按类名选择它们并隐藏/显示它们。我稍微修改了你的代码。希望这对你有用。

HTML

＆＃13;

＆＃13;

$(".add-box").click(function() {
  $(".claim-box").show();
});

$(".claim-btn-close").click(function(){
    $(this).parent().hide();
});

＆＃13;

.claim-btn-close{
  top: 2px;
  position: absolute;
  right: -14px;
  padding: 5px;
  border: 2px solid #e46a5d;
  border-radius: 50%;
  color: #e46a5d;
  cursor: pointer;
}

.add-box-wrap1{
  position: relative;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1 claim-box" style="display: none;">
 <div class="claim-btn-close">
 <i class="fa fa-times" aria-hidden="true"></i>
</div>
<a href="" class="btn claim-btn">Claim 1</a>
</div>

<div class="add-box-wrap2 claim-box" style="display: none;">
  <div class="claim-btn-close">
   <i class="fa fa-times" aria-hidden="true"></i>
  </div>
  <a href="" class="btn claim-btn">Claim 2</a>
</div>

<div class="form-group add-form">
 <label for="" class="control-label"></label>
 <div class="add-btn">
  <div class="col-md-10">
   <a class="add-box" data-target="1">Add another&ensp;<i class="fa fa-plus">
   </i></a>
 </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在jsfiddle

上复制了您的代码

 $(".add-box").click(function() {

  //$(".add-box-wrap").show(); //.add-box-wrap1 or .add-box-wrap2 
  if ($(".add-box-wrap").length < 4) {
  var box = $($(".add-box-wrap")[0]).clone().show();
  box.appendTo($(".container"));
    }
});

$(".claim-btn-close").click(function() {
  $(this).parent().hide();
});

1. 将您的盒子移出主容器作为模板
2. 克隆框，直到框的数量不超过3（包括模板）

Answer 3

在这种情况下，请将$('.add-box').click功能更改为此

$(".add-box").click(function() {
    if($(".add-box-wrap" + $(this).data('target')).is(":visible")) {
    $(".add-box-wrap" + ($(this).data('target')+1)).show();
    $(this).data('target', ($(this).data('target')+2));
  } else {
    $(".add-box-wrap" + $(this).data('target')).show();
  }
});

在此更改中，您正在检查＆＃34;是否已点击＆＃34;数据属性的对应.add-box-wrap是否可见。如果可见，请将1添加到data-target并显示下一个2。最后显示后添加{{1}}（所以在下一次点击时你可以直接显示第3个按钮）

您的Fiddle updated