2016-12-02 25 views
3

私は雪の効果のJavaScriptを持っています。各フレークがクリック可能にしたかったが、私はここで間違ってやっているのか分からない...ここでjQueryのクリック機能は私の部門では機能しません

$('#flake').click(function(e) { 
    alert("Test"); 
}); 

は、コードがhttp://codepen.io/anon/pen/eBVJjB 感謝です!

+0

こんにちはマルコ!問題は、あなたが 'class'の代わりに' id'を使っていることです。あなたは、HTML、クラス、IDに関する基本的なことを学び始める必要があります.1つの良い読んだこれは:http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class – michelgotta

+0

あなたのコードを入れてください質問ではなく、リンクしてください。 http://meta.stackexchange.com/editing-help#code –

+0

http://codepen.io/Ajay-Mathur/pen/mOXVov –

答えて

5

いくつかの問題があります。

  • 固有のID
  • イベント委任

フレークが、このような状況ではおそらくクラスだろう自分自身ユニークなセレクタを持っている必要があります。 <div class="flake">。 idsはユニークでなければならず、あなたのコードには含まれていません。

あなたが持っているクリックイベントは、 divに結び付けられています。割り当て時にDOMに存在するid flakeを持つdivですが、遅延のためにnoneである可能性があります。代わりに、イベントはすべてフレークに委任されるべきであり、好ましくはクラスセレクタとドキュメント内の要素間で一意でなければならない

$("body").on("click",".flake",function(e){ 
    alert('clicked'); 
}); 
0
  1. id属性前述。
  2. <div id="flake">要素がページに追加される前に$('#flake').click(...コードが実行されたため、clickイベントは接続されませんでした。あなたはここに$(document).on('click', '#flake', function() {... });

を使用することによってこの問題を解決することができ、あなたのコードの修正です:

/** 
 
* jquery.snow - jQuery Snow Effect Plugin 
 
* 
 
* Available under MIT licence 
 
* 
 
* @version 1 (21. Jan 2012) 
 
* @author Ivan Lazarevic 
 
* @requires jQuery 
 
* @see http://workshop.rs 
 
* 
 
* @params minSize - min size of snowflake, 10 by default 
 
* @params maxSize - max size of snowflake, 20 by default 
 
* @params newOn - frequency in ms of appearing of new snowflake, 500 by default 
 
* @params flakeColor - color of snowflake, #FFFFFF by default 
 
* @example $.fn.snow({ maxSize: 200, newOn: 1000 }); 
 
*/ 
 
(function($){ 
 
    $.fn.snow = function(options){ 
 

 
    var $flake \t \t \t = $('<div class="flake" />').css({'position': 'absolute', 'top': '-50px'}).html('&#10052;'), 
 
     documentHeight \t = $(document).height(), 
 
     documentWidth \t = $(document).width(), 
 
     defaults \t \t = { 
 
      minSize \t \t : 10, 
 
      maxSize \t \t : 20, 
 
      newOn \t \t : 500, 
 
      flakeColor \t : "#FFFFFF" 
 
     }, 
 
     options \t \t \t = $.extend({}, defaults, options); 
 

 

 
    var interval \t \t = setInterval(function(){ 
 
     var startPositionLeft \t = Math.random() * documentWidth - 100, 
 
      startOpacity \t \t = 0.5 + Math.random(), 
 
      sizeFlake \t \t \t = options.minSize + Math.random() * options.maxSize, 
 
      endPositionTop \t \t = documentHeight - 40, 
 
      endPositionLeft \t \t = startPositionLeft - 100 + Math.random() * 200, 
 
      durationFall \t \t = documentHeight * 10 + Math.random() * 5000; 
 
     $flake 
 
     .clone() 
 
     .appendTo('body') 
 
     .css(
 
     { 
 
      left: startPositionLeft, 
 
      opacity: startOpacity, 
 
      'font-size': sizeFlake, 
 
      color: options.flakeColor 
 
     } 
 
    ) 
 
     .animate(
 
     { 
 
      top: endPositionTop, 
 
      left: endPositionLeft, 
 
      opacity: 0.2 
 
     }, 
 
     durationFall, 
 
     'linear', 
 
     function() { 
 
      $(this).remove() 
 
     } 
 
    ); 
 
    }, options.newOn); 
 

 
    }; 
 

 
})(jQuery); 
 

 
$(function(){ 
 
    $.fn.snow(); 
 
    $(document).on("click", '.flake',function() { 
 
    alert("Test"); 
 
    }); 
 
});
body { 
 
    background: black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1

あなたのアプローチ/コードと問題のカップルがあります。

  1. HTMLドキュメントには固有のIDが必要です。したがって、IDをclassに置き換える必要があります。

  2. 要素はDOMに動的に追加され、スクリプトの実行時には存在しないため、イベントをドキュメントに添付してフレーククラスに委譲します。

ワーキングスニペット:

/** 
 
* jquery.snow - jQuery Snow Effect Plugin 
 
* 
 
* Available under MIT licence 
 
* 
 
* @version 1 (21. Jan 2012) 
 
* @author Ivan Lazarevic 
 
* @requires jQuery 
 
* @see http://workshop.rs 
 
* 
 
* @params minSize - min size of snowflake, 10 by default 
 
* @params maxSize - max size of snowflake, 20 by default 
 
* @params newOn - frequency in ms of appearing of new snowflake, 500 by default 
 
* @params flakeColor - color of snowflake, #FFFFFF by default 
 
* @example $.fn.snow({ maxSize: 200, newOn: 1000 }); 
 
*/ 
 
(function($) { 
 

 
    $.fn.snow = function(options) { 
 

 
    var $flake = $('<div class="flake" />').css({ 
 
     'position': 'absolute', 
 
     'top': '-50px' 
 
     }).html('&#10052;'), 
 
     documentHeight = $(document).height(), 
 
     documentWidth = $(document).width(), 
 
     defaults = { 
 
     minSize: 10, 
 
     maxSize: 20, 
 
     newOn: 500, 
 
     flakeColor: "#FFFFFF" 
 
     }, 
 
     options = $.extend({}, defaults, options); 
 

 

 
    var interval = setInterval(function() { 
 
     var startPositionLeft = Math.random() * documentWidth - 100, 
 
     startOpacity = 0.5 + Math.random(), 
 
     sizeFlake = options.minSize + Math.random() * options.maxSize, 
 
     endPositionTop = documentHeight - 40, 
 
     endPositionLeft = startPositionLeft - 100 + Math.random() * 200, 
 
     durationFall = documentHeight * 10 + Math.random() * 5000; 
 
     $flake 
 
     .clone() 
 
     .appendTo('body') 
 
     .css({ 
 
      left: startPositionLeft, 
 
      opacity: startOpacity, 
 
      'font-size': sizeFlake, 
 
      color: options.flakeColor 
 
     }) 
 
     .animate({ 
 
      top: endPositionTop, 
 
      left: endPositionLeft, 
 
      opacity: 0.2 
 
      }, 
 
      durationFall, 
 
      'linear', 
 
      function() { 
 
      $(this).remove() 
 
      } 
 
     ); 
 
    }, options.newOn); 
 

 
    }; 
 

 
})(jQuery);
body { 
 
    background: black; 
 
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script> 
 
    $(document).ready(function() { 
 
    $.fn.snow(); 
 
    }); 
 
</script> 
 
<script> 
 
    $(document).on("click", '.flake', function(e) { 
 
    alert("Test"); 
 
    }); 
 
</script>

関連する問題