1

各フォーム要素に一意の ID 番号を割り当てようとしています

http://jsfiddle.net/d0okie0612/22cTn/に取り組んでいるフィドルはこちら

出力されたHTMLはこちら

<div id="container">
  <div id="top_form">
    <form>
      Street: <input class="street" name="[][street]" id="form_element" type="text">               <br><br>
      City: <input class="city" name="[][city]" id="form_element" type="text">
      <select>
        <option value=" ">State</option>
        <option value="ca">CA</option>
        <option value="az">AZ</option>
        <option value="de">DE</option>
       </select>
       Zip: <input name="[][zipcode]" type="text"><br /><br />
     </form>
    </div>
  </div>

    <br />
       <a href="#" id="awsomeButton">+ Add Loction</a>
    <br />
     <br />
   <button id="submit_btn">Submit</button>

</p>

そしてここにjqueryがあります

var tpl = ""
+ "<div id='location_div_<%= id %>'><h1>My Location #<%= id %></h1></div>";

var newId = new Date().getTime();
var template = _.template(tpl);
var compiled = template({id: newId});

var addedForm = "<div id='added_form'>"
+ "<a href='#' class='close_btn'>x</a>"
+ "Street: <input name='[][street]' type='text'>"
+ "<br /><br />"
+ "City: <input name='[][city]' type='text'>"
+ "<select>"
+ "<option value=' '>State</option>"
+ "</select>"
+ "Zip: <input name='[][zipcode]' type='text'>"
+ "</div>"


$('#awsomeButton').on('click', 
function(e){
    $(addedForm).hide().appendTo('form').fadeIn('slow');

});

$('.close_btn').live('click', function(event){
event.preventDefault();
$(this).parents('div#added_form:first').fadeOut('slow', function(){
    $(this).remove();    

});
});

だから基本的に私はそれが欲しいので、それが言う場所 name='[][street]'

要素を検査するときに [] に表示されるように、newID から生成された一意の ID 番号が必要です。

たとえば

最初の場所 [0]street[0]stateなど

2番目の場所 [1]street[1]stateなど

私はjQueryを初めて使用するので、フィドルを編集してそれを実現できるか、6歳のように説明していただければ幸いです。

ありがとう

4

2 に答える 2

3

replace(regex,newvalue) でこのようにすることができます

var x = 0
$('#awsomeButton').on('click', function(e) {
    $(addedForm.replace(/[[]]/g, '[' + (x++) + ']')).hide().appendTo('form').fadeIn('slow');
});

番号を自動インクリメント[]しながらを置き換える場所。[x]

http://jsfiddle.net/HDUvG/

理解するのが難しすぎる場合は、分割/結合を行うことができます-配列に分割され[]、数字の周りに括弧が付いた文字列に再結合されます'[' + (x++) + ']'

$(addedForm.split('[]').join('[' + (x++) + ']')).hide().appendTo('form').fadeIn('slow');

http://jsfiddle.net/ffDEg/

于 2012-12-07T21:42:06.113 に答える
0

このような方法で、フォーム要素に一意の ID を割り当てることができます。

$(document).ready(function () {
    var elements = $('form input'),
    i;
    for (i = 0; i < elements.length; i++) {
        elements[i].id = "input-" + i;
    }
});

これにより、「#input-0」、「#input-1」などの値が得られます。

次のような例でテストすることにより、これが機能することを確認できます。

$('#input-1').css('background-color', 'red');
于 2012-12-07T21:54:54.593 に答える