你如何为一个jQuery链创建一个变量？

Question

我是一个jQuery新手，我试图使用一个变量来减少必要的写入量，但由于某种原因，它不起作用。下面是代码，并注释掉了我尝试过的代码，但没有成功。任何关于此事的帮助将不胜感激。谢谢！

$(document).ready(function() { 
    var defaultValue, 
     defaultColor, 
     likeButton = $(this).closest('.pic-section').find('.like-button'), 
     likeCount = $(this).closest('.pic-section').find('.like-count'), 
     flashHeartActivateLikeIconAndAddToLikeCount = function() { 
      if (+$(this).closest('.pic-section').find('.like-count').text() === 0) { 
       $(this).closest('.pic-section').prepend('<div class="heart"></div>'); 
       $('.heart').delay(300).fadeOut(); 
       // likeCount.text(1) => why doesn't this work? 
       $(this).closest('.pic-section').find('.like-count').text(1); 
      } else { 
       $(this).closest('.pic-section').find('.like-count').text(0); 
       $('.heart').remove(); 
      } 
      if ($(this).closest('.pic-section').find('.like-button').css('background-position-x') === '-276px') { 
       $(this).closest('.pic-section').find('.like-button').css({ 
        'background-position-x': '-155px', 
        'background-position-y': '-229px' 
       }); 
      } else { 
       $(this).closest('.pic-section').find('.like-button').css({ 
        'background-position-x': '-276px', 
        'background-position-y': '-180px' 
       }); 
      } 
     }, 
     ActivateLikeIconAndAddToLikeCount = function() { 
      if ($(this).css('background-position-x') === '-276px') { 
       $(this).css({ 
        'background-position-x': '-155px', 
        'background-position-y': '-229px' 
       }); 
       $(this).closest('.pic-section').find('.like-count').text(1); 
      } else { 
       $(this).css({ 
        'background-position-x': '-276px', 
        'background-position-y': '-180px' 
       }); 
       $(this).closest('.pic-section').find('.like-count').text(0); 
      } 
     }, 
     clearValueAndChangeToBlack = function() { 
      defaultValue = $(this).val(); 
      defaultColor = $(this).css('color'); 
      $(this).css('color', 'black'); 
      if ($(this).val() === defaultValue) $(this).val(''); 
     }, 
     addDefaultValueAndChangeToGray = function() { 
      if ($(this).val().length === 0) { 
       $(this).val(defaultValue); 
       $(this).css('color', defaultColor); 
      } 
     }, 
     submitWithEnter = function(key) { 
      if (key.which === 13) { 
       var str = $(this).closest('.pic-section').find('input').val(); 
       $(this).css('color', 'rgb(153, 153, 153)'); 
       $(this).closest('.pic-section').find('.comments').append('<div class="new-comment"><b>ctoppel</b> ' + str + '</div>'); 
       $(this).val('Add a comment...'); 
       $(this).blur(); 
      } 
     }; 
    $.get('https://codesmith-precourse.firebaseio.com/instagram/-JqL35o8u6t3dTQaFXSV.json', function(data) { 
     var user = "<div class='pic-user'><div class='avatar'></div>ctoppel</div>", 
      time = "<div class='pic-time'>2d</div>", 
      header = "<div class='pic-header'>" + user + time + "</div>", 
      likes = "<div class='likes'><span class='like-count'>0</span> likes</div>", 
      comments = "<div class='comments'></div>", 
      addComment = "<div class='add-comment'><div class='like-button'></div><input class='comment-input' name='comment' value='Add a comment...'></input></div>", 
      footer = "<div class='pic-footer'>" + likes + comments + addComment + "</div>"; 
     for (var i = 0; i < data.length; i++) { 
      function testImage(URL) { 
       var tester = new Image(); 
       tester.onload = imageFound; 
       tester.src = URL; 
      } 

      function imageFound(pic) { 
       $('.feed-container').append('<div class="pic-section">' + header + '<img src="' + pic.currentTarget.src + '">' + footer + '</div>'); 
      } 
      testImage(data[i]); 
     }; 
    }); 
    $('.feed-container').on('dblclick', 'img', flashHeartActivateLikeIconAndAddToLikeCount); 
    $('.feed-container').on('click', '.like-button', ActivateLikeIconAndAddToLikeCount); 
    $('.feed-container').on('focus', 'input', clearValueAndChangeToBlack); 
    $('.feed-container').on('focusout', 'input', addDefaultValueAndChangeToGray); 
    $('.feed-container').on('keypress', 'input', submitWithEnter); 
}); 

Answer 1

移动函数内部的变量，目前this指窗口不给feed-container元素

flashHeartActivateLikeIconAndAddToLikeCount = function() { 
      var section = $(this).closest('.pic-section'); 
      likeButton = section.find('.like-button'), 
      likeCount = section.find('.like-count'), 
      heart = $('.heart'); 
      if (likeCount.text() == 0) { 
       section.prepend('<div class="heart"></div>'); 
       heart.delay(300).fadeOut(); 
       likeCount.text(1); 
      } else { 
       likeCount.text(0); 
       heart.remove(); 
      } 
      if (likeButton.css('background-position-x') === '-276px') { 
       likeButton.css({ 
        'background-position-x': '-155px', 
        'background-position-y': '-229px' 
       }); 
      } else { 
       likeButton.css({ 
        'background-position-x': '-276px', 
        'background-position-y': '-180px' 
       }); 
      } 
     } 

Answer 2

你还没有使用的一些变量，像这样，

var defaultValue, 
     defaultColor, 
     likeButton = $(this).closest('.pic-section').find('.like-button'), 
     likeCount = $(this).closest('.pic-section').find('.like-count'); 

变量声明在Jquery中很简单：

var xyz = $(this).val(); 

请检查以上所有代码，并正确使用变量。 然后它应该是工作。