如何在jQuery中设置变量以便它不会自动运行？

Question

我正在尝试重构我的代码，不再重复，并使其更清晰。我试图像这样设置一个变量：

var activatedLikeIcon = $(this).closest('.pic-section').find('.like-button').css({
    'background-position-x': '-155px',
    'background-position-y': '-229px'
});

问题是当设置变量时背景位置属性会改变???此代码嵌套在if语句中，并且只应在特定条件下运行，但无论如何都会更改属性。任何见解都会非常有用。谢谢！

PS：如果.css（STUFF）替换为.hide()，则会出现相同的现象，并且一旦设置了变量就会隐藏div。

下面的代码是整个JS的参考（我已经注释掉了有问题的变量和代码。我想将代码替换为代码，以替换当前使用代码以使事物更具可读性的地方）：< / p>

$(document).ready(function() {
    var defaultValue,
        defaultColor,
        flashHeartActivateLikeIconAndAddToLikeCount = function() {
            var likeCount = $(this).closest('.pic-section').find('.like-count'),
                likeIcon = $(this).closest('.pic-section').find('.like-button');
            if (+likeCount.text() === 0) {
                $(this).closest('.pic-section').prepend('<div class="heart"></div>');
                $('.heart').delay(300).fadeOut();
                likeCount.text(1)
            } else {
                likeCount.text(0);
                $('.heart').remove();
            }
            if (likeIcon.css('background-position-x') === '-276px') {
                likeIcon.css({
                    'background-position-x': '-155px',
                    'background-position-y': '-229px'
                });
            } else {
                likeIcon.css({
                    'background-position-x': '-276px',
                    'background-position-y': '-180px'
                });
            }
        },
        activateLikeIconAndAddToLikeCount = function() {
            var likeCount = $(this).closest('.pic-section').find('.like-count'),
                likeIcon = $(this).closest('.pic-section').find('.like-button');
                // activatedLikeIcon = likeIcon.css({
                //     'background-position-x': '-155px',
                //     'background-position-y': '-229px'
                // }); => adding this code causes the background positions to change immediately
                if (likeIcon.css('background-position-x') === '-276px') {
                    likeIcon.css({
                        'background-position-x': '-155px',
                        'background-position-y': '-229px'
                    });
                    likeCount.text(1);
                } else {
                    likeIcon.css({
                        'background-position-x': '-276px',
                        'background-position-y': '-180px'
                    });
                    likeCount.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);
});