使用不同的ID创建多个文本区

Question

我创建了一个eshop的结帐页面，我有一个循环，显示用户添加到购物车的产品。在循环内部，我显示产品的信息，我有一个文本区域，以便用户可以选择每个产品的数量。问题是每个文本区域的ID必须是唯一的。我怎样才能用不同的id在循环中创建多个textareas？

textarea的：

<form name='txtAreaForm' method='GET'> 
    <textarea disabled name='textArea' id='counter'></textarea> 
</form> 

另外，我有两个按钮（+ - ）来改变textarea的价值，这是.js文件：

var counter = 1; 

// Display total 
$("#counter").text(counter); 

// When button is clicked 
$("#plusButton").click(function(){ 
    counter = counter + 1; 
    $("#counter").text(counter); 
}); 


//Subtract 
$("#minusButton").click(function(){ 
    if (counter>1) { 
     counter = counter - 1; 
     $("#counter").text(counter); 
    } 
}); 

Answer 1

虽然问题对我来说不太清楚，你可以做类似下面的事情：

var counter = 1; 
 

 
// Display total 
 
$("#counter").text(counter); 
 

 
var counter = counter + 1; 
 
for(var i=0; i<5; i++){ 
 
\t $("form").append('<textarea name=textArea"+counter+" id=counter"+counter+">1</textarea><input class="plus" type="button" value="+" /><input class="minus" type="button" value="-" /><br>'); 
 
} 
 
// When button is clicked 
 
$(".plus").click(function(){ 
 
    var txtArea = $(this).prev('textarea').text(); 
 
    $(this).prev('textarea').text(parseInt(txtArea)+1); 
 
}); 
 

 

 
//Subtract 
 
$(".minus").click(function(){ 
 
    var txtArea = $(this).prev().prev('textarea').text(); 
 
    if(txtArea >=2){ 
 
    $(this).prev().prev('textarea').text(parseInt(txtArea)-1); 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name='txtAreaForm' method='GET'> 
 
    
 
</form>

Answer 2

只需使用JavaScript来渲染其id尽可能多的textareas形式，并设置行动与他们每个人的每个按钮。

看到这个演示：

(function() { 
 
    // Set the plus action on every button with the class name «plus». 
 
    function setPlusAction() { 
 
    function plus(e) { 
 
     var textarea = e.target.previousSibling; // Find the textarea element related to the button clicked. 
 
     textarea.value = textarea.value * 1; // Convert the value into number. 
 
     textarea.value++; // Increment its value. 
 
    } 
 
    var elems = document.getElementsByClassName("plus"), i, len = elems.length, button; 
 
    for (i = 0; i < len; i++) { 
 
     button = elems[i]; // Find the current button. 
 
     button.onclick = plus; //Set the «plus» function on every button which has been found. 
 
    } 
 
    } 
 

 
    // Set the minus action on every button with the class name «minus». 
 
    function setMinusAction() { 
 
    function minus(e) { 
 
     var textarea = e.target.previousSibling.previousSibling; // Find the textarea element related to the button clicked. 
 
     textarea.value = textarea.value * 1; // Convert the value into number. 
 
     if (textarea.value > 1) { 
 
     textarea.value--; // Decrement its value. 
 
     } 
 
    } 
 
    var elems = document.getElementsByClassName("minus"), i, len = elems.length, button; 
 
    for (i = 0; i < len; i++) { 
 
     button = elems[i]; // Find the current button. 
 
     button.onclick = minus; //Set the minus function on every button which has been found. 
 
    } 
 
    } 
 
    
 
    // Render a form with the quantity of textareas required. 
 
    function buildForm(textareas) { 
 
    var html = "<form name=\"txtAreaForm\" method=\"GET\">", i; 
 
    for (i = 0; i < textareas; i++) { 
 
     html += "<div><textarea disabled name=\"textArea\" id=\"textarea"; 
 
     html += i; 
 
     html += "\">1</textarea><button class=\"plus\" type=\"button\">+</button><button class=\"minus\" type=\"button\">-</button></div>"; 
 
    } 
 
    html += "</form>"; 
 
    return html; // Return the html content with the form. 
 
    } 
 
    
 
    /* 
 
    1. Render the form with document.getElementById("div").innerHTML = buildForm(50); 
 
    2. Once the form is renderd call setPlusAction() function; 
 
    3. And call setMinusAction() function; 
 
    */ 
 
    document.getElementById("div").innerHTML = buildForm(50); // Set 50 textareas. 
 
    setPlusAction(); 
 
    setMinusAction(); 
 
})();

#div div { 
 
    border: solid 1px #ccc; 
 
    margin: 2px; 
 
    padding: 2px; 
 
} 
 

 
button.plus, 
 
button.minus { 
 
    cursor: pointer; 
 
}

<div id="div"></div>

---

更新：

jQuery的版本：

$(function() { 
 
    // Render a form with the quantity of textareas required. 
 
    function buildForm(textareas) { 
 
    var html = "<form name=\"txtAreaForm\" method=\"GET\">", i; 
 
    for (i = 0; i < textareas; i++) { 
 
     html += "<div><textarea disabled name=\"textArea\" id=\"textarea"; 
 
     html += i; 
 
     html += "\">1</textarea><button class=\"plus\" type=\"button\">+</button><button class=\"minus\" type=\"button\">-</button></div>"; 
 
    } 
 
    html += "</form>"; 
 
    return html; // Return the html content with the form. 
 
    } 
 

 
    $("#div").html(buildForm(50)); // Render the form with 50 textareas. 
 

 
    $(".plus").on("click", function() { 
 
    var texarea = $(this).prev(), value = texarea.val() * 1; 
 
    value++; 
 
    texarea.val(value); 
 
    }); 
 
    
 
    $(".minus").on("click", function() { 
 
    var texarea = $(this).prev().prev(), value = texarea.val() * 1; 
 
    if (value > 1) { 
 
     value--; 
 
     texarea.val(value); 
 
    } 
 
    }); 
 
});

#div div { 
 
    border: solid 1px #ccc; 
 
    margin: 2px; 
 
    padding: 2px; 
 
} 
 

 
button.plus, 
 
button.minus { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="div"></div>

记住： ID必须是唯一的。

Answer 3

我更喜欢使用一个类，因为我认为这是代码更清晰。

实施例：my_set_Of_Text_area.add ('<div><span> Ananas : </span>','</div>');

我更喜欢使用的数据作出与计数区和+ /链路 - 的按钮。

$(function() { 
 

 
    class TxtAreaFab { 
 
    constructor(Form_ID, TextAreaPrefix, BtPlusClass, BtMinusClass) { 
 
     this._ref = 0; 
 
     this._TaP = TextAreaPrefix; 
 
     this._BtPlus = BtPlusClass; 
 
     this._BtMinus = BtMinusClass; 
 
     this._$ID = $('#' + Form_ID); 
 
    } 
 

 
    add(before, after) { 
 
     var elements = before; 
 
     this._ref++; 
 
     elements += "<textarea disabled id='TxtArea_" + this._ref + "'>1</textarea>"; 
 
     elements += "<button class=" + this._BtPlus + " data-ref=\"TxtArea_" + this._ref + "\">+</button>"; 
 
     elements += "<button class=" + this._BtMinus + " data-ref=\"TxtArea_" + this._ref + "\">-</button>"; 
 
     elements += after; 
 
     $(elements).appendTo(this._$ID); 
 
    } 
 
    /* ----- not used , just here for sample 
 
\t \t \t clear() { 
 
\t \t \t \t this._$ID.html(''); 
 
\t \t \t \t this._ref = 0; 
 
\t \t \t } 
 
    */ 
 
    }; 
 

 
    var my_set_Of_Text_area = new TxtAreaFab('txtAreaForm', 'zoneTA_', 'ClassBtPlus', 'ClassBtMinus'); 
 

 
    my_set_Of_Text_area.add('<div><span> Apples : </span>', '</div>'); 
 
    my_set_Of_Text_area.add('<div><span> Oranges : </span>', '</div>'); 
 
    my_set_Of_Text_area.add('<div><span> Pears : </span>', '</div>'); 
 
    my_set_Of_Text_area.add('<div><span> Bananas : </span>', '</div>'); 
 

 
    $('#txtAreaForm').on('click', "button", function(e) { 
 
    e.stopPropagation(); 
 
    var $txtArea = $("#" + $(this).data("ref")), 
 
     v = parseInt($txtArea.val()); 
 
    if ($(this).hasClass('ClassBtPlus')) $txtArea.val(++v); 
 
    if ((v > 1) && ($(this).hasClass('ClassBtMinus'))) $txtArea.val(--v); 
 
    return false; 
 
    }); 
 

 
    my_set_Of_Text_area.add('<div><span> Ananas : </span>', '</div>'); 
 
});

#txtAreaForm div { 
 
    clear: both; 
 
    height: 30px; 
 
} 
 

 
#txtAreaForm div span { 
 
    display: block; 
 
    float: left; 
 
    width: 120px; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    padding-right: 10px; 
 
} 
 

 
#txtAreaForm textarea { 
 
    display: block; 
 
    float: left; 
 
    width: 40px; 
 
    height: 16px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    resize: none; 
 
}

<form name='txtAreaForm' id='txtAreaForm' method='GET'></form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 4

特别有趣的解决方案！ （但实际）。

我只用了9行JavaScript/jQuery，而在CSS中做了一些。 而且不需要textarea id。 （好的，我的2 "if"语句只有1行）。

对于HTML部分，每个文本框放置在"p"（款），这就是它：

<p><textarea disabled > 1 </textarea></p> 
<p><textarea disabled > 2 </textarea></p> 
<p><textarea disabled > 3 </textarea></p> 

的窍门是在我使用:after和:before像"+"或"-"按钮的CSS 。 放置在每个框"p"的右侧。

form p:after { 
    right: -22px; 
    content:'+'; 
... 
form p:before { 
    right: -43px; 
    content:'-'; 

在jQuery部分。

我使用鼠标单击的相对位置来确定操作应该是加号还是减号。对于小故事：--$ (this) .outerWidth();--是有用的。

当然，在每个textarea上添加一个ID仍然会更好;但经过反思后，我觉得这些输入字段可以在PHP服务器（？）上生成。

所以，看起来很奇怪，这个解决方案非常严重。 ;）

一切都在片段中。

$(function() { 
 
    $('form p').click(function(e) { 
 
    var 
 
     posX = (e.pageX - $(this).offset().left) - $(this).outerWidth(); 
 
    Sign = (posX > 22) ? "moins" : (posX > 0) ? "plus" : "none", 
 
     Valn = parseInt($(this).children('textarea').text()); 
 

 
    if (Sign === 'plus') $(this).children('textarea').text(++Valn); 
 
    if ((Sign === 'moins') && (Valn > 1)) $(this).children('textarea').text(--Valn); 
 
    }); 
 
});

textarea, 
 
form, 
 
p, 
 
textarea { 
 
    font-family: Tahoma, sans-serif; 
 
    font-size: 16px; 
 
} 
 

 
textarea { 
 
    float: left; 
 
    width: 40px; 
 
    height: 22px; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    resize: none; 
 
    line-height: 20px; 
 
} 
 

 
form p { 
 
    box-sizing: border-box; 
 
    display: block; 
 
    float: left; 
 
    clear: both; 
 
    position: relative; 
 
    border: 0; 
 
    margin: 5px 0 0 20px; 
 
    padding: 0; 
 
} 
 

 
form p:before, 
 
form p:after { 
 
    position: absolute; 
 
    top: 2px; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: block; 
 
    color: white; 
 
    background-color: darkslategray; 
 
    text-align: center; 
 
    font-size: 18px; 
 
} 
 

 
form p:after { 
 
    right: -22px; 
 
    content: '+'; 
 
    line-height: 18px; 
 
} 
 

 
form p:before { 
 
    right: -43px; 
 
    content: '-'; 
 
    line-height: 16px; 
 
}

<form name="txtAreaForm" method='GET'> 
 
    <p><textarea disabled> 1 </textarea></p> 
 
    <p><textarea disabled> 2 </textarea></p> 
 
    <p><textarea disabled> 3 </textarea></p> 
 
</form> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>