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

在函数内部移动变量，当前form = SectionExtractionForm( instance=SectionsExtractions.objects.get(id='<extraction_id>') )指向不是this元素的窗口

feed-container

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

请检查以上所有代码，并正确使用变量。那应该是可行的。

如何为jQuery链的一部分创建变量？

2 个答案: