html中的构造函数和数组答案

【问题标题】：constructor & array in htmlhtml中的构造函数和数组
【发布时间】：2014-10-29 18:18:47
【问题描述】：

我已经构建了构造函数和数组，如何让它出现在 html 文件中。这是一个加/减显示隐藏的东西。

这里是html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FAQs</title>
  <link rel="shortcut icon" href="images/favicon.ico">
  <link rel="stylesheet" href="index.css">
  </script>
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="faqs.js"></script>       
</head>

<body>
  <div id="menu">
    <?php
      include "menu.html"
    ?>
  </div>

  <section id="faqs">
    <h1>Phone Book</h1>

    <h2 id="foreign">Import</h2>
    <div>
        <!-- Array for imports goes here-->
    </div>
    <h2 id="muscle">Muscle</h2>
    <div>
        <!-- Array for muscle cars goes here-->     
    </div>
    <h2 id="two">Bikes</h2>
    <div>
        <!-- Array for bikes goes here-->
    </div>
  </section>
</body>
</html>

这里是 javascript，里面确实有 jQuery：

$(document).ready(function() {
    // the toggle event method has been removed from jQuery 1.9
    $("#faqs h2").toggle(
        function() {
            $(this).toggleClass("minus");
            $(this).next().show();
        },
        function() {
            $(this).toggleClass("minus");
            $(this).next().hide();
        }

        function contacts(id, type, name, phone) {
            this.id = id;
            this.type = type;
            this.name = name;
            this.phone = phone;
        }

        var auto = new Array();

        auto[0] = new contacts("foreign", "car", "BMW", "867-5309") auto[1] = new contacts("american", "car", "Ford", "224-3425") auto[2] = new contacts("two", "bike", "Harley", "224-9191")

    ); // end toggle

    // here's one way to code this app without the toggle event method
    // but this is by no means the only way

    /*$("#faqs h2").click(function() {
        $(this).toggleClass("minus");
        if ($(this).attr("class") != "minus") {
            $(this).next().hide();
        }
        else {
            $(this).next().show();
        }
    }); // end click*/

}); // end ready

数组和/或构造函数可能做错了。那么如何将数组放入 html 中，以便显示数组中的所有内容，而不是将其全部放入 html 文件中？

【问题讨论】：

分配auto后为什么要立即重新分配？
他的意思是你分配给auto[0]两次，然后分配给auto[1]和auto[2]两次。
老兄，遍历它并使用 jquery text() 打印 DOM 中的值
好的，我只是去拿了一个
按照惯例，构造函数通常以大写字母开头，所以function Contacts()。你也应该这样做var auto = []

标签： javascript jquery html arrays

【解决方案1】：

This Fiddle 包含一个添加内容的建议，无需担心切换：

function Contact(id, type, name, phone) {
    this.id = id;
    this.type = type;
    this.name = name;
    this.phone = phone;
}

var contacts = [
    new Contact("foreign", "car", "BMW", "867-5309"),
    new Contact("foreign", "car", "Mazda", "777-7777"),
    new Contact("muscle", "car", "Ford", "224-3425"),
    new Contact("muscle", "car", "Chevy", "692-2557"),
    new Contact("two", "bike", "Kawasaki", "225-2772"),
    new Contact("two", "bike", "Harley", "224-9191")
]

$(document).ready(function() {
    $.each(contacts, function(index, contact) {
        $("#" + contact.id).append(
            "<div class='contact'>" +
            "<span class='type'>" + contact.type + "</span> " +
            "<span class='name'>" + contact.name + "</span> " +
            "<span class='phone'>" + contact.phone + "</span> " +
            "</div>"
        );
    });
});

您当然必须弄清楚您真正想要的标记。

然后在它上面添加一个切换是relatively easy：

    $("#faqs h2").toggleClass("minus").each(function() {
        $(this).next().hide();
    });

    $("#faqs").on("click", "h2", function(evt) {
        $(this).toggleClass("minus");
        $(this).next().toggle();
    });

请注意，构造函数已更改为大写形式Contact。但是可能没有理由在这里实际使用构造函数。您没有使用原型链；它没有给你带来任何好处。这也可以：

function makeContact(id, type, name, phone) {
    return {
        id: id,
        type: type,
        name: name,
        phone: phone
    };
}

var contacts = [
    makeContact("foreign", "car", "BMW", "867-5309"),
    makeContact("foreign", "car", "Mazda", "777-7777"),
    //...
];

【讨论】：

它什么也没做。我需要能够点击 h2 并下拉列表