Curt
Curt

Reputation: 934

How do you create a variable for a piece of a jQuery chain?

I am a jQuery newbie, and I have tried to use a variable to reduce the amount of writing necessary, but for some reason it is not working. Below is the code and commented out is the code that I tried but didn't work. Any help on the matter would be greatly appreciated. Thanks!

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

Upvotes: 1

Views: 62

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Move the variables inside the function, currently this refers to the window not to the feed-container element

  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'
                });
            }
        }

Upvotes: 1

kishan Radadiya
kishan Radadiya

Reputation: 832

You have not used some of variables, like this,

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

Variable declare in Jquery it's simple:

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

Please, check all above code, and do use variable properly. Then it should be work.

Upvotes: 0

Related Questions