2016-05-17 2 views
0

Я хочу добавить 8 флажков, пронумерованных от 11 до 18, с помощью jquery.jquery добавление элементов с использованием цикла до загрузки страницы

Моего Javascript

<script type="text/javascript"> 
$(document).ready(function(){ 
for (i = 11; i < 19; i++) { 
    $("#container").append("<div class=\"round-button\"><div class=\"round-button-circle\"><label><input type=\"checkbox\" value=" + i + "><span>" + i + "</span></label></div></div>"); 
} 
}); 
</script> 

HTML, просто

<div id="#container"></div> 

Обновление: скрипка работает, но не работает в HTML. Что я делаю не так?

<!DOCTYPE html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="Content-Style-Type" content="text/css" /> 
    <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/select2.css"> 
    <link rel="stylesheet" href="css/select2-bootstrap.css"> 

</head> 

<body> 
    <div id="container"> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     for (i = 11; i < 19; i++) { 
      $("#container").append("<div class=\"round-button\"><div class=\"round-button-circle\"><label><input type=\"checkbox\" value=" + i + "><span>" + i + "</span></label></div></div>"); 
     } 
    }); 
    </script> 
</body> 

</html> 

CSS-код в styles.css

+0

Что сейчас проблема? –

+1

[demo] (https://jsfiddle.net/of5bj24m/) должно быть в порядке, кроме '#' в html для ID – guradio

+1

** ['См. Работает отлично здесь] (http://jsfiddle.net/Guruprasad_Rao/s8vhacg5/2 /) **. Удалить '#' из 'container' в' html' –

ответ

1

Удалить # с идентификатором DIV, просто дать идентификатор Div как

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

Jsfiddle: http://jsfiddle.net/qtju592w/

+0

Черт, такая глупая ошибка. Благодарю. – Shawon0418

+0

Я обновил вопрос, не могли бы вы помочь? – Shawon0418

+1

Вы получаете какую-либо ошибку в консоли? –