Question

我构建了构造函数和数组，如何使它出现在html文件中。这是一个加/减show show的东西。

这是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文件中？

Answer 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"),
    //...
];

构造函数＆amp; html中的数组

1 个答案: