Question

我正在创建一个可以生成测验的jQuery插件。

我刚开始开发，不知怎的，我的代码执行了两次。也许我没有看到我的问题...但我认为没有理由记录两次。

我使用HTML5 Boilerplate作为我的基本模板...

HTML：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">SCHTUFF</a>
        </div>
      </div>
    </div>

    <div class="container">

        <div class="quiz-container">

        </div>

        <hr>

        <footer>
            <p>&copy; Company 2013</p>
        </footer>
    </div> <!-- /container -->        
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/plugins/jquery.rpFiftyFifty-1.1.js"></script>
        <script src="js/main.js"></script>
    </body>
</html>

jquery.rpFiftyFifty-1.1.js：

;(function($) {

    $.fn.fiftyFiftyQuiz = function fiftyFiftyQuiz(config) {

        function FiftyFiftyQuiz(el, config) {

            this.$el = $(el);
            this.$container = this.$el.find('.quiz-container');

            this.config = config;

            this.init();
        }

        FiftyFiftyQuiz.prototype = {

            init: function() {
                console.log("===== INIT =====");
                this.loadJson(this.config.json);
            },

            loadJson: function(json) {
                console.log(json);
            }

        }

        this.each(function() {
            var myConfig = $.extend({}, jQuery.fn.fiftyFiftyQuiz.DEFAULT_CONFIG, config);
            $(this).data('fiftyFiftyQuiz', new FiftyFiftyQuiz(this, myConfig));
        });

        return this;
    };

    jQuery.fn.fiftyFiftyQuiz.DEFAULT_CONFIG = {

        // Default JSON
        json: 'https://dl.dropboxusercontent.com/s/n6x1eg0o7impfk0/quiz.json',
        // Default Skin
        skin: 'default-rp'
    }

}(jQuery));

main.js：

$(document).ready(function() {

    $('.container').fiftyFiftyQuiz();
});

Answer 1

您有两个类.container

的元素

第一个：

<div class="container">
    <div class="navbar-header">

第二个：

<div class="container">
    <div class="quiz-container">

您的jQuery选择器将匹配这两者，并为每个选择器执行代码。

Answer 2

您有两个使用Class .container

的元素

刚刚发生的事情是，当您触发插件时，它会为您提供一个对象数组，并相应地为每个元素触发插件两次。

 this.each(function() {
            var myConfig = $.extend({}, jQuery.fn.fiftyFiftyQuiz.DEFAULT_CONFIG, config);
            $(this).data('fiftyFiftyQuiz', new FiftyFiftyQuiz(this, myConfig));
        });

这是插件文件中的代码，它使用元素类触发两次或每个元素。

<div class="container">

    <div class="quiz-container">

 <div class="container">
        <div class="navbar-header">

这是您的代码段中的HTML代码。

jquery插件触发两次

2 个答案: