jquery 플러그인이 두 번 실행됩니다.

퀴즈를 생성하는 jQuery 플러그인을 만들고 있습니다.jquery 플러그인이 두 번 실행됩니다.

방금 개발을 시작했으며 어떻게 든 내 코드가 두 번 실행됩니다. 어쩌면 내 문제가 보이지 않을 수도 있지만 두 번 기록 할 이유가 없다고 생각합니다. 나는 당연히 내 기본 템플릿으로 HTML5 상용구를 사용하고

...

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(); 
});

출처

2014-03-04 Shuyinsama

당신은 무엇 단지 발생하는 것은 당신이 플러그인을 발사 할 때 그것은 당신에게 객체의 배열을 제공하고 그에 따라 각 요소에 대해 두 번 플러그인을 발사한다는 것이다 클래스 .container

두 요소를 가지고있다.

이것은 요소 클래스를 사용하여 요소를 두 번 또는 각 요소에 대해 실행하는 플러그인 파일의 코드입니다.

<div class="container"> 

    <div class="quiz-container"> 

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

이것은 스 니펫의 HTML 코드입니다.

출처

2014-03-04 20:50:29

예! 고맙습니다! 그래서 나 바보. – Shuyinsama

문제 없습니다. 모두와 함께합니다. –

클래스 .container 첫 번째

두 요소 :

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

두 번째 :

이

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

귀하의 jQuery 선택이 모두 일치하고 각각의 코드를 실행합니다.

출처

2014-03-04 20:45:03 Dismissile

jquery 플러그인이 두 번 실행됩니다.

답변

관련 문제