Question

我在这里有一个网站http://galnova.com

这是标记

<!doctype html>
<html lang="en" ng-app>
<head>
    <meta charset="utf-8">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
    <link href="2015/css/g15.css" rel="stylesheet" />
</head>
<body class="index">
<div class="header">
    <ng-include src="'_master_includes/header.html'"></ng-include>
</div>

<div class="container-fluid nill">
    <div class="bg_bottom_stretch">
        <div class="bg_top_center">
            <div class="evertin">
                <div class="caste">
                    <!-- Caste -->
                    <ng-include src="'_master_includes/caste.html'"></ng-include>
                </div>
                <div class="in_content">
                    <!-- Content -->
                    <ng-include src="'_master_includes/in_content.html'"></ng-include>
                </div>
                <div class="sub_footer">
                    <!-- Sub Footer -->
                    <ng-include src="'_master_includes/sub_footer.html'"></ng-include>
                </div>
                <div class="toop4"><span>Social Media</span></div>
                <footer>
                    <!-- Footer -->
                    <ng-include src="'_master_includes/footer.html'"></ng-include>
                </footer>
            </div>
        </div>
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="2015/js/instafeed.min.js"></script>
<script src="2015/js/g15.js"></script>

<script>
$(function(){
var accessToken = '271323200.1677ed0.67c49d5002704bc09c3c77320ec138a2'; // use your own token
// var date = new Date(parseInt(data.data[i].created_time) * 1000);

  $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
    $.each(insta.data,function (photos,src) {
      if ( photos === 200 ) { return false; }
        var date = new Date(parseInt(this.created_time) * 1000);
        // template
        $(
        '<div class="col-sm-6 col-md-4 col-lg-2 grip_wrap">' +
        '<div class="grip_hang_topp"></div>' +
        '<div class="col grip">' +

        '<img class="pp" title="" src="' + this.user.profile_picture + '" />' +
        '<div class="coat">' + this.user.username + '</div>' +

        '<a title="' + this.caption.text + '" class="fancybox zero" rel="gallery1" href="' + this.images.standard_resolution.url + '">' +
        '<img src="' + this.images.thumbnail.url + '" />' +
        '</a>' +
        '<div class="col coat2 truncate">' + this.caption.text + '</div>' +
        '<div class="row nill">' +
        '<span class="col-sm-6 heart-wrap floated">' + '<i class="fa fa-heart">'+ '</i>' + this.likes.count +' <div class="summ">likes</div>'+'</span>' +
        '<span class="col-sm-6 comment-wrap floated">' + '<i class="second fa fa-comment">'+ '</i>' + this.comments.count +' <div class="summ">comments</div>'+'</span>' +
        '</div>' +
        '<span class="col check-wrap floated">' + '<i class="second fa fa-check">'+ '</i>' + 'Posted ' + (date.getMonth()+1) + '/' + date.getDate() + '/' + date.getFullYear().toString().substring(2) +'</span>' +
        '<a href="' + this.link + '" target="_blank"><button class="col-12 btn btn-primary">View in Instagram</button></a>' +
        '</div>' +

        '<div class="grip_hang_bott"></div>' +
        '</div>'

      ).appendTo('#instafeed');
    }); 
  });
});

$('.grip').hover(function(e){
    $(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
    return false;
});
</script>
</body>
<a href="#" class="scrollup"></a>
</html>

我无法获取我在html页面上编写的jquery片段

这是片段

$('.grip').hover(function(e){
//  "use strict";
//  e.preventDefault();
//  if ($(window).width() > 991) {
//alert('TEST!!!');
        $(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');

        return false;
//  }
});

我也无法让jquery在我的js文件中的任何地方工作

这是js文件http://galnova.com/2015/js/g15.js

$(document).ready(function () {
//Page Loads/*
"use strict";

    $(document).on('click', '.toggleAll', function(){
        $('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
        var el = $(this);
        el.text() === el.data("text-swap") ? el.text(el.data("text-original")) : el.text(el.data("text-swap"));
    });

    $(window).scroll(function () {
        if ($(this).scrollTop() > 52) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

    $('.scrollup').click(function () {
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        return false;
    });

});

(function ($) {
    "use strict";
    //Function to animate slider captions 
    function doAnimations(elems) {
        //Cache the animationend event in a variable
        var animEndEv = 'webkitAnimationEnd animationend';

        elems.each(function () {
            var $this = $(this),
                $animationType = $this.data('animation');
            $this.addClass($animationType).one(animEndEv, function () {
                $this.removeClass($animationType);
            });
        });
    }

    //Variables on page load 
    var $myCarousel = $('#carousel-example-generic'),
    $firstAnimatingElems = $myCarousel.find('.item:first').find("[data-animation ^= 'animated']");

    //Initialize carousel 
    $myCarousel.carousel();

    //Animate captions in first slide on page load 
    doAnimations($firstAnimatingElems);

    //Pause carousel  
    $myCarousel.carousel('pause');

    //Other slides to be animated on carousel slide event 
    $myCarousel.on('slide.bs.carousel', function (e) {
        var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
        doAnimations($animatingElems);
    });

})(jQuery);

$(document).on('click','.toop',function () {
    "use strict";
    $('#m1').slideToggle('fast');
});

$(document).on('click','.toop2',function () {
    "use strict";
    $('#m2').slideToggle('fast');
});

//Resume Slider
$(document).on('mouseenter mouseleave','[id^=claps]',function () {
    "use strict";

    var idNumber = $(this).attr("id").replace("claps", "");
    if ($(window).width() > 800) {
        $('.inco'+idNumber).stop().animate({width: 'toggle', height: '125px'});
    }
});

$(document).on('click','#menulink',function (event) {
    "use strict";
    event.preventDefault();
    if ($('.navigation-wrapper').hasClass('show-menu')) {
        $('.navigation-wrapper').removeClass('show-menu');
        $('.navigation').hide();
        $('.navigation li').removeClass('small-padding');
    } else {
        $('.navigation-wrapper').addClass('show-menu');
        $('.navigation').fadeIn();
        $('.navigation li').addClass('small-padding');
    }
});

//////////////////////////

//This controls the music playback on the media page

window.addEventListener("play", function(evt)
{   "use strict";
    if(window.$_currentlyPlaying)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

$('.fancybox').fancybox();

请帮助我理解为什么该代码段不能在页面上工作，只能在控制台中使用

Answer 1

由于您在文档就绪事件处理程序中创建.grip元素，因此返回JSON异步请求

$(function () {
      $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
          // Your code creating .grip elements
      }
});

但是您要在页面末尾添加悬停事件处理程序，在文档就绪事件处理程序之外和JSON异步请求返回之外，在添加悬停事件处理程序时，您的.grip元素不存在（但是当您在控制台中执行代码时，元素已经存在。）

解决方案1：

您可以在创建.grip元素后，在JSON请求返回中移动代码，添加悬停事件处理程序。

$(function () {
      $.getJSON('https://api.instagram.com/v1/users/self/media/recent/?access_token='+accessToken+'&callback=?',function (insta) {
          $.each(insta.data,function (photos,src) {
              // Your code creating .grip elements
          }

          $('.grip').hover(function(e){
              $(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
              return false;
          });
      }
});

解决方案2：

您可以更改jQuery悬停事件处理程序绑定以使用事件委派功能。 http://api.jquery.com/on/

$('#instafeed').on('mouseover', '.grip', function(e){
    $(this).find('.fa-heart, .fa-comment, .fa-check, .btn, img').toggleClass('pls');
    return false;
});

我的jquery片段只能在控制台中使用

1 个答案: