在JavaScript函數中使用html

Question

我在下面的代碼中遇到了一個小問題。 我寫下面的代碼。 無法找出這段代碼有什么問題：

HTML：

<div class="all">
    <div class="info">
        <label>Degree <input type="text" class="row[0][degree]"></label>
        <label>School <input type="text" class="row[0][school]"></label>
        <label>Grade <input type="text" class="row[0][grade]"></label>
    </div>
</div>
<button class="add_button" onclick="add_new()">Add Another</button>

JavaScipt：

var counter = 1;

function add_new() {

    $('.all').append('
                <div class="info">/
                        <label>Degree <input type="text" class="row[' + counter + '][degree]"></label>/
                        <label>School <input type="text" class="row[' + counter + '][school]"></label>/
                        <label>Grade <input type="text" class="row[' + counter + '][grade]"></label>/
                </div>'
        counter++;
    );
}

Answer 1

您的counter變量沒有任何相關性，因為它是在本地聲明的。 如果要在每次調用此函數時遞增計數器，請全局聲明它。 代碼中也有一些語法錯誤，您的代碼應類似於

var counter = 0;
  function add_new() {

    $('.all').append('<div class="info">\
                    <label>Degree <input type="text" class="row[' + counter + '][degree]"></label>\
                    <label>School <input type="text" class="row[' + counter + '][school]"></label>\
                    <label>Grade <input type="text" class="row[' + counter + '][grade]"></label>\
            </div>'

    );

counter++;
}

Answer 2

關閉.append()方法后，嘗試增加計數器。

Answer 3

counter必須是全局的並且在$.append之外增加

var counter = 0;
function add_new(){
    $('.all').append('<div class="info"><label>Degree <input type="text" class="row['+counter+'][degree]"></label><label>School <input type="text" class="row['+counter+'][school]"></label><label>Grade <input type="text" class="row['+counter+'][grade]"></label></div>');                
counter++; 
}

JSFiddle

Answer 4

與其使用onclick，不如使用干凈的方法來做到這一點：

HTML：

<button class="add_button">Add Another</button>

JQUERY：

$(document).ready(function(){

 var counter = 0;

$(".add_button").click(function(){

            $('.all').append('
            <div class="info">/
                    <label>Degree <input type="text" class="row['+counter+'][degree]"></label>/
                    <label>School <input type="text" class="row['+counter+'][school]"></label>/
                    <label>Grade <input type="text" class="row['+counter+'][grade]"></label>/
            </div>'

            );   
counter++;

   });

})

Answer 5

將HTML附加到DOM而不用擔心字符串很長的一種方法是：

$('.all').append(
    $('<div class="info"/>').html(
        $('<label/>').html( 'Degree ' ).append('<input type="text" class="row[' + counter + '][degree]">')
    )
    .append(
        $('<label/>').html( 'School ' ).append( '<input type="text" class="row[' + counter + '][school]">' )
    )
    .append(
        $('<label/>').html( 'Grade ' ).append( '<input type="text" class="row[' + counter + '][grade]">' )
    )
);

可能還有幾行，但是我發現它更簡潔，更易於閱讀（當您的思維處於JS / jQuery模式時）並且更易於編寫代碼.....正如您所看到的是否有一個對象，這很容易迭代對象並生成所需的HTML