生成/删除div时的id冲突

Question

我正在尝试设置一个脚本，允许用户生成最多4个div(每个包含一个输入和一个span)以及删除它们的能力。

​

var i = 1;
$(".submit-source .add-source").click( function() {
	i++;
	source = jQuery('<div id="source-wrap-' + i + '" class="source-wrap" ><input name="source-' + i + '" type="text"/><span class="remove-source">remove</span></div>');
	source.insertAfter(".submit-source .source-wrap:last");
				
	if (i == 4) {
		$(".submit-source .add-source").hide();
	}
	else {
		$(".submit-source .add-source").show();
	}
} );
$(document).on("click", ".submit-source .remove-source", function() {
	i--;
	$(this).parent().remove();
				
	if (i == 4) {
		$(".submit-source .add-source").hide();
	}
	else {
		$(".submit-source .add-source").show();
	}
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="submit-source">
	<span>Add up to 4 different sources.</span>
	<div id="source-wrap-1" class="source-wrap" >
		<input name="source-1" type="text"/>
	</div>
	<span class="add-source">add input</span>
</div>

​

例如，我遇到的问题是，如果生成了4个div，并且用户删除了第二个或第三个div，然后生成一个新的div，那么他最终得到了两个id相同的div(这些div内部的输入名称也是相同的)。

我如何改进我的脚本，这样生成的输入将检查前面的输入是否存在？例如，如果这个包已经存在，它将不会生成一个新的#源-包-4，而是生成#源-包-3(如果这个div不存在或被删除)。

我不希望它经过#source 4(输入名称为source-4 )，以便在检索数据时可以轻松地使用php处理输入。

谢谢你的帮助！

Answer 1

通过将可用的ids保留在数组中，您可以确保不会重用任何不应该重用的东西。

另外，如果/然后逻辑在add和remove函数中都是相同的，因此它们被隔离以删除重复。

​

// Store available ids
var availableIDs = [2,3,4];

const NOT_AVAIL = "ID_UNAVAILABLE";

// This function returns the first element in the aray
// If the array no longer has any available elements,
// it returns "ID_UNAVAILABLE". You can incorporate that 
// into the code to ensure that only 4 elements can be made at max
function getID(){
  if(availableIDs.length > 0){  
    // return the first element in the array and remove that element
    // from the array
    return availableIDs.shift();
  } else {
    return NOT_AVAIL;
  }
}

$(".submit-source .add-source").click( function() {
    // Get the next available ID
    var newID = getID();
  
    // As long as the new ID is not "ID_UNAVAILABLE", proceed:
    if(newID !== NOT_AVAIL){
	  source = $('<div id="source-wrap-' + newID + 
                      '" class="source-wrap" ><input name="source-' + newID + 
                      '" type="text"/><span class="remove-source">remove</span></div>');
  
	  source.insertAfter(".submit-source .source-wrap:last");
     
      var theID = $(source).attr("id");
      var theLastChar = theID[theID.length - 1];
      
      // Test new element
      console.log("New element's ID is: " + theID, "Array now contains: " + availableIDs);
      hideShow();
    }
} );

$(document).on("click", ".submit-source .remove-source", function() {  
    var theID = $(this).parent()[0].getAttribute("id");
    var theLastChar = theID[theID.length - 1];
    $(this).parent().remove();
  
	availableIDs.push(theLastChar);
    console.log("ID to be put back into array is: " + theLastChar, 
                "Array now contains: " + availableIDs);		
    hideShow();
} );

// Common function used when adding and removing:
function hideShow(lastChar){
  var $setToWorkOn = $(".submit-source .add-source");
  (availableIDs.length === 0) ? $setToWorkOn.hide() : $setToWorkOn.show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="submit-source">
	<span>Add up to 4 different sources.</span>
	<div id="source-wrap-1" class="source-wrap" >
		<input name="source-1" type="text"/>
	</div>
	<span class="add-source">add input</span>
</div>

​