第3次克隆后禁用选项卡克隆

时间：2016-03-21 09:19:59

标签： jquery twitter-bootstrap-3

我需要帮助才能在第三个标签条目后禁用“添加好友”标签。我不知道如何解决这个问题，我一直在谷歌搜索，仍然找不到最好的解决方案。任何建议将不胜感激。 Bootply版本 - http://www.bootply.com/LCQIOKXudR

提前致谢。

$(".nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
  })
  .on("click", "span", function() {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
  });


$('.add-contact').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length; //think about it ;)

  var num = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
    newNum = new Number(num + 1), // The numeric ID of the new input field being added, increasing by 1 each time
    newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value

  $(this).closest('li').before('<li class="active"><a href="#contact_' + id + '">Friend ' + id + '</a><span class="badge">x</span></li>');
  $('.tab-content').append('<div class="tab-pane" id="contact_' + id + '"><h2 id="reference" name="reference" class="heading-reference">Friend ' + id + '</h2><div class="form-group"><label class="label_fn control-label" for="first_name">First name:</label><input id="friend_first_name' + id + '" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""></div></div>');
});
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.nav-tabs > li {
  position: relative;
}
.nav-tabs > li > a {
  display: inline-block;
}
.nav-tabs > li > span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}
.nav-tabs > li:hover > span {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">

  <ul class="nav nav-tabs">
    <li class="active"><a href="#contact_01" data-toggle="tab">Friend</a>
    </li>
    <li><a href="#" id="addBtn" class="add-contact" data-toggle="tab">+ Add Friend</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="contact_01">


      <div id="entry1" class="clonedInput">
        <h2 id="reference" name="reference" class="heading-reference">Friend 1</h2>

        <div class="form-group">
          <label class="label_fn control-label" for="first_name">First name:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
        </div>


      </div>

    </div>
  </div>

</div>

2 个答案:

答案 0 :(得分：0)

您已经检查了现有标签的数量，因此在添加新标签之前，您只需检查它少于三个：

$('.add-contact').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length;

  if (id <= 3) {
    // append new tab here...
  }
});

＆＃13;
＆＃13; 
$(".nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
  })
  .on("click", "span", function() {
    var anchor = $(this).siblings('a');
    $(anchor.attr('href')).remove();
    $(this).parent().remove();
    $(".nav-tabs li").children('a').first().click();
  });


$('.add-contact').click(function(e) {
  e.preventDefault();
  var id = $(".nav-tabs").children().length;

  if (id <= 3) {
    var num = $('.clonedInput').length,
      newNum = new Number(num + 1),
      newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow');

    $(this).closest('li').before('<li class="active"><a href="#contact_' + id + '">Friend ' + id + '</a><span class="badge">x</span></li>');
    $('.tab-content').append('<div class="tab-pane" id="contact_' + id + '"><h2 id="reference" name="reference" class="heading-reference">Friend ' + id + '</h2><div class="form-group"><label class="label_fn control-label" for="first_name">First name:</label><input id="friend_first_name' + id + '" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""></div></div>');
  }
});
＆＃13; 
.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.nav-tabs > li {
  position: relative;
}
.nav-tabs > li > a {
  display: inline-block;
}
.nav-tabs > li > span {
  display: none;
  cursor: pointer;
  position: absolute;
  right: 6px;
  top: 8px;
  color: red;
}
.nav-tabs > li:hover > span {
  display: inline-block;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#contact_01" data-toggle="tab">Friend</a>
    </li>
    <li>
      <a href="#" id="addBtn" class="add-contact" data-toggle="tab">+ Add Friend</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="contact_01">
      <div id="entry1" class="clonedInput">
        <h2 id="reference" name="reference" class="heading-reference">Friend 1</h2>
        <div class="form-group">
          <label class="label_fn control-label" for="first_name">First name:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
        </div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

更改 

$(".nav-tabs").on("click", "a", function(e){
      e.preventDefault();
      $(this).tab('show');
    })
    .on("click", "span", function () {
        var anchor = $(this).siblings('a');
        $(anchor.attr('href')).remove();
        $(this).parent().remove();
        $(".nav-tabs li").children('a').first().click();
    });
        
        
    $('.add-contact').click(function(e) {
        e.preventDefault();
       if($('.nav.nav-tabs li').length < 4  ){
       
        var id = $(".nav-tabs").children().length; //think about it ;)

        var num     = $('.clonedInput').length, // Checks to see how many "duplicatable" input fields we currently have
            newNum  = new Number(num + 1),      // The numeric ID of the new input field being added, increasing by 1 each time
            newElem = $('#entry' + num).clone().attr('id', 'entry' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
        
        $(this).closest('li').before('<li class="active"><a href="#contact_'+id+'">Friend '+id+'</a><span class="badge">x</span></li>');         
        $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'"><h2 id="reference" name="reference" class="heading-reference">Friend '+id+'</h2><div class="form-group"><label class="label_fn control-label" for="first_name">First name:</label><input id="friend_first_name'+id+'" name="first_name" type="text" placeholder="" class="input_fn form-control" required=""></div></div>');
         }
      else{
        alert("Not aloowed")
      }
    });
  

添加额外条件以检查标签数量

工作演示 

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.nav-tabs > li {
    position:relative;    
}

.nav-tabs > li > a {
    display:inline-block;
}

.nav-tabs > li > span {
    display:none;
    cursor:pointer;
    position:absolute;
    right: 6px;
    top: 8px;
    color: red;
}

.nav-tabs > li:hover > span {
    display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">                

<ul class="nav nav-tabs">
        <li class="active"><a href="#contact_01" data-toggle="tab">Friend</a></li>
        <li><a href="#" id="addBtn" class="add-contact" data-toggle="tab">+ Add Friend</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="contact_01">
 

        <div id="entry1" class="clonedInput">
          <h2 id="reference" name="reference" class="heading-reference">Friend 1</h2>

        <div class="form-group">
          <label class="label_fn control-label" for="first_name">First name:</label>
          <input id="first_name" name="first_name" type="text" placeholder="" class="input_fn form-control" required="">
        </div>


        </div>

    </div>
</div>
  
  </div>
unsigned char constkey[] = "asd123";

相关问题
最新问题