Question

嘿伙计我对编码很陌生，如果你们发现我的代码无法正常工作，你会感到好奇。我的目标几乎就是制作293个按钮并让每个按钮说第1集，第2集等等。我显然不想复制和粘贴293个html行并写入名称和链接所以我决定制作一个变量和一个而jquery里面的循环然而这似乎没有用，我做了我的研究，似乎找不到任何答案，我很感激帮助

<header>
        <img src="/Users/Jared/Downloads/dragon-ball-z-logo-font-background-1.jpg" height="250" width="100%">
    </header>
    <div class="container">
        <div class="row">
            <div id ="panel"class="panel panel-warning">
                <div class="panel-heading">Dragon Ball Episodes</div>
                    <div id ="panelbody"class="panel-body">

                        <button id="btn1" class="btn btn-warning" href="#">Episode 1</button>


<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src ="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function)(){
    var num =1;
    while(num<293){
        $('#panelbody').append('<button class="btn btn-warning" href="#">Episode</button>')
        num++;
    }

Answer 1

以下代码可以帮助您添加Episode 2，Episode 3 .....

$(function( $ ){
    var num = 1;
    while(num<293){
        $('#panelbody').append('<button class="btn btn-warning" href="#">Episode ' + (num + 1) + '</button>');
        num++;
    }
});

你很亲密;你只是没有让变量num起作用。

JS FIDDLE DEMO

关于你网页结构的词汇

您不需要包含两个版本的jQuery;如果您这样做，只需将$(function() {更改为$(function( $ ) {。
您的文档似乎没有body元素;我在div

</head>

虽然你可以放置你的jQuery / JS代码并在头部或正文部分的任何地方包含jQuery核心和插件，但你不必将代码放在你想要进行更改的地方。您的代码可以位于head部分或包含的文件中，它仍然会适当地更改DOM。请参阅以下建议的结构：

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src ="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    $(function( $ ){
        var num = 1;
        while(num<293){
            $('#panelbody').append('<button class="btn btn-warning" href="#">Episode ' + (num + 1) + '</button>');
            num++;
        }
    });
</script>
</head>
<body>

<div class="container">
        <div class="row">
            <div id ="panel"class="panel panel-warning">
                <div class="panel-heading">Dragon Ball Episodes</div>
                    <div id ="panelbody"class="panel-body">
                        <button id="btn1" class="btn btn-warning" href="#">Episode 1</button>
                    </div>
                </div>
        </div>
    </div>
</div>

<!-- ............ -->
</body>

我的jquery循环，什么错了？

1 个答案: