Reputation: 934
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
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
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