jquery - 複数の JQuery コードの実行

Question

こんにちは、助けてくれてありがとう。wordpress を使用して複数の jQuery 関数を実行しています。2番目のものを追加するとすぐに、最初のもののコードが壊れます。これがなぜなのかわかりません。

<script type="text/javascript">
var timeInterval = null, transition_time = 0, time_between_slides = 4000;
jQuery(document).ready(function ($) {

  /* This is for the slider */
    var $slider = $('.slider');
    var $sliderLi = $slider.find('li');

    $sliderLi.hide();
    //$slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    function slideShow() {
        var i = $slider.find('li.active').index();

        $sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

        if (i == -1 || $sliderLi.length == i + 1) {
            $slider.find('li:first').addClass('active').fadeIn(transition_time);
        } else {
            $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
        }
    };

    $slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

});

</script>

セカンドコード

<script type="text/javascript">
jQuery(document).ready(function () {

    var $popup = $('.popup');

    $('area').on({
      click : function(e){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));

        $popup.text($obj.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40,
        }).show();
      };

});
</script>

私はこれを2つの異なる方法でやろうとしました。1 つ目は、最初のコードの下部にある 2 つ目のコードを差し込むことでした。これにより、最初のコードが壊れてしまい、2 番目のコードは機能しませんでした。こちらもそのまま分割してみました。http://jsfiddle.net/timlcooley/B5wa4/5/で動作しているにもかかわらず、2 番目のコードはまだ動作していません。何がコードを壊しているのかわかりません。このプロセスの助けは素晴らしいでしょう。

これは、人々が共有したすべてを読んだ後に編集されたコードです。問題はまだ発生します。スライダーが壊れ、クリック領域が機能しません。

<script type="text/javascript">

var timeInterval = null, transition_time = 0, time_between_slides = 4000;
var $slider = $('.slider');
var $sliderLi = $slider.find('li');

var $popup = $('.popup');
jQuery(document).ready(function ($) {

  /* This is for the slider */


    $sliderLi.hide();
    //$slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    function slideShow() {
        var i = $slider.find('li.active').index();

        $sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

        if (i == -1 || $sliderLi.length == i + 1) {
            $slider.find('li:first').addClass('active').fadeIn(transition_time);
        } else {
            $sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
        }
    };

    $slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

/* This is for the popup feature */
    $('area').on({
      click : function(e){
        var $this = $(this),
            $obj = $('#'+$this.prop('alt'));

        $popup.text($obj.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40
        }).show()
      };

});
</script>

score 1 · Accepted Answer

次のように使用する場合は、2 番目のコードで準備完了関数に渡す必要があり$ます。$('.popup')

jQuery(document).ready(function ($) {

[編集] ケビン B が指摘したように、$. 最初のバージョンでエイリアスバージョンを使用しているため、これを想定しましたが、他に何があるかを確認せずにその想定を行うことはできないと思います.

ただし、2 番目のコードスニペットには構文上の問題がいくつかあります。

left: e.pageX + 40,

これの後にコンマは必要ありません (IE はこれでエラーになります)。

クリック機能を閉じるときは、セミコロンは必要ありません。

score 0 · Accepted Answer

問題を引き起こす可能性のあるコードで見られる問題がいくつかあります。1 つ目は $ の欠落です。また、機能をより良い場所に配置することができます。ここで行われていることの多くは、jQuery(document).ready(function ($) { が jQuery で何を意味するかを理解することと関係があります。それについてのトレーニングのために、別の日に私に会いに来てください。それまでの間、これを試してみてください:

<script type="text/javascript">
var timeInterval = null, transition_time = 0, time_between_slides = 4000, popup = null, slider = null, sliderLi = null;

jQuery(document).ready(function ($) {

  /* This is for the slider */
    slider = $('.slider');
    sliderLi = slider.find('li');

    sliderLi.hide();
    //slider.find('li:first').addClass('active').fadeIn(transition_time);
    slideShow();
    timeInterval = setInterval(slideShow, transition_time + time_between_slides);

    slider.mouseenter(function () {
        clearInterval(timeInterval);
    }).mouseleave(function () {
        timeInterval = setInterval(slideShow, transition_time + time_between_slides);
    });

    popup = $('.popup');

    $('area').on({
      click : function(e){
        var area = $(this);
        var target = $('#' + area.prop('alt'));

        popup.text(target.text()).css({
          top: e.pageY + 10,
          left: e.pageX + 40
        }).show();
      };

});

function slideShow() {
    var i = slider.find('li.active').index();

    sliderLi.eq(i).removeClass('active').fadeOut(transition_time);

    if (i == -1 || sliderLi.length == i + 1) {
        slider.find('li:first').addClass('active').fadeIn(transition_time);
    } else {
        sliderLi.eq(i + 1).addClass('active').fadeIn(transition_time);
    }
}
</script>

$ 記号を過度に使用する必要はありません。jQuery ready イベントで $ を関数に渡すと、jQuery の代わりに $ を使用できます。$ で始まる新しいパラメータは必要ありません。それは実際には単なる文体的なプログラミングの選択です。var foo は var $foo と同じで、$(".slider") は jQuery(".slider") と同じです。パラメータは、timeInterval、transition_time、および time_between_slides パラメータと同様に、単純に foo と呼ぶことができます。

次に、コメントで指定されているように、準備ができている関数が 1 つだけ必要です。また、グローバルレベルでアクセスできるように、jQuery 対応関数などの外に関数を配置することをお勧めします。

これがうまくいくかどうかを確認する必要がありますが、正しい方向への一歩になるはずです. 楽しんでください、J

jquery - 複数の JQuery コードの実行

2 に答える 2

Related

Reference