Hiding images with same data value jquery - javascript

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.
$(document).ready(function(){
var animal1;
var animal2;
$(".memory1").on("click", function(){
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function(){
animal2 = $(this).data('animal');
if (animal1==animal2){
$(this).data('animal').hide();
}
else {
alert("Wrong, Try again!");
}
});
});
so the line where its going wrong is obviously
$(this).data('animal').hide();
But I cant figure out a way to hide both images, or a better way of going about it.. :/
http://jsfiddle.net/4vgfca76/

This doesn't work the way you think it does
$(this).data('animal').hide();
When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.
What you get is the string hund etc. and that string doesn't have a hide() method.
You should be using the attributes selector to select the elements with that attribute instead
$(document).ready(function () {
var animal1, animal2;
$(".memory1").on("click", function () {
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function () {
animal2 = $(this).data('animal');
if (animal1 == animal2) {
$('img[data-animal="'+animal1+'"]').hide();
} else {
alert("Fel! Försök igen");
}
});
});

Related

jQuery store .each() .text() for truncation possible?

I have asked a similar question previously, but didn't give enough context. As a result I received an excellent, technically-correct answer that didn't solve my issue.
I've also looked around on Stack but don't know enough about jQuery to find my answer.
I need to truncate multi-line text with jQuery. The code needs to add/remove text as well when the browser window expands and contracts. So from my minimal understanding the code needs to store the text before truncating it so that it can add text back in when the browser window is expanded.
Initially this piece of code solved my problem:
$(function () {
var initial = $('.js-text').text();
$('.js-text').text(initial);
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
$(window).resize(function() {
$('.js-text').text(initial);
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
});
});
This code no longer cuts it as when I use these .js classes more than once on a single page all the text is stored together and then spat out whenever the classes are being used.
Here is a jsFiddle of the the issue:
http://jsfiddle.net/1ddxtpke/
I need to store each .js-text text separately, so that I can use this jQuery snippet across a large project and have all instances of truncated text fed back into the DOM if a user were to expand their browser window size.
Is this possible? If so, how would I do it?
Thanks in advance for tackling my question. I hope I have been specific enough in what I'm looking for.
There are several ways how to do this. You can store it in an array:
var initialValues = [];
// Save the initial data
$('.js-text').each(function () {
initialValues.push($(this).text());
});
// On start
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
// When the window gets resized
$(window).resize(function() {
$('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
});
It has a catch though - the .js-text elements can't be erased or moved about, because it'll destroy the ordering. That'd require another function for order resetting in case something changes.
I haven't tested it, but in principle it should work this way.
EDIT: Okay, I reworked it a bit and here's the result:
var initialValues = [];
// Save the initial data
$('.js-text').each(function () {
initialValues.push($(this).text());
while ($(this).outerHeight() > $(this).parent().height()) {
$(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
}
});
// When the window gets resized
$(window).resize(function() {
$('.js-text').each(function (index) {
$(this).text(initialValues[index]);
while ($(this).outerHeight() > $(this).parent().height()) {
$(this).text($(this).text().replace(/\W*\s(\S)*$/, '...'));
}
});
});
I see 2 ways of doing this :
1) Storing the full text as an attribute when needed. With this your text will stay with your div and can be retrived on expanding with a simple .attr .
2) Storing the text in an array and storing the index as an attribute on the div. This way is probably much more efficient than the previous one as I'm not sure what is the max length of a value of an attribute.
your function one syntax error
var initialValues = [];
// Save the initial data
$('.js-text').each(function () {
initialValues.push($(this).text());
});
// On start
while ($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
// When the window gets resized
$(window).resize(function() {
$('.js-text').text(function () { return initialValues[$('.js-text').index($(this))]; });
while($('.js-text').outerHeight() > $('.js-text-truncator').height()) {
$('.js-text').text(function(index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}
});
Demo Link http://jsfiddle.net/1ddxtpke/2/

How do I make my click catcher work?

I'm trying to create a simple click catcher where if you click .image-class the javascript will take the href from another element with a class name of .btn and send you to it's destination. Though I keep getting errors on lines 7 & 10 saying that undefined is not a function. How do I make this work?
<script>
var ClickCatcher=
{
init:function(){
var link = jQuery('.btn')[1].href;
var imgCatch = jQuery('.image-class');
imgCatch.addEventListener("click", ClickCatcher.clickListener, false);
},
clickListener:function(){
window.location = link;
}
};
ClickCatcher.init();
</script>
You can do this with jquery with a simple click event
jQuery('.image-class').on('click', function (){
window.location = jQuery('.btn').eq(1).attr('href');
});
But if you still want to write in the way you have you can do:
var ClickCatcher = {
init: function () {
jQuery('.image-class').on('click', function (){
window.location = jQuery('.btn').eq(1).attr('href');
});
}
};
ClickCatcher.init();
Just make sure to fire the init method after dom load.
update: One issue with it is that you have coded your target etc in the code rather then pass it, so its going to be hard to reuse, you'd be better off doing:
var ClickCatcher = {
init: function ($button, loc) {
$button.on('click', function (){
window.location = loc;
});
}
};
ClickCatcher.init(jQuery('.image-class'), jQuery('.btn').eq(1).attr('href'));
That way the internal working is seperate from the dom (as you are passing the dom dependencies to the function.
#atmd showed a very good way of doing this. If you just want to know what your mistake was though. It is wa an error in your jQuery stament to get the btn href
jQuery('.btn')[1].href
you need to call the attr function and then get the href attr. and use .eq(1) to reduce the set to the first btn
jQuery('.btn').eq(1).attr('href);

Refactoring Code

Let's say I have the following code:
$(function () {
$(".buy-it-now.ribbon").click(function () {
$(".bid-to-beat.ribbon.active").removeClass("active");
$(".bid-to-beat.ribbon").addClass("inactive");
$(".buy-it-now.ribbon.inactive").removeClass("inactive");
$(".buy-it-now.ribbon").addClass("active");
$(".bid-now").hide();
$(".buy-now").show();
$(".add-to-cart").hide();
})
$(".bid-to-beat.ribbon").click(function () {
$(".buy-it-now.ribbon.active").removeClass("active");
$(".buy-it-now.ribbon").addClass("inactive");
$(".bid-to-beat.ribbon").removeClass("inactive");
$(".bid-to-beat.ribbon").addClass("active");
$(".buy-now").hide();
$(".bid-now").show();
$(".add-to-cart").show();
});
});
It is a simple function that allows for multiple UI related things to happen on the front-end of a site I am working on. I am fairly (very) new to jQuery and JavaScript in general and am learning about refactoring and making my code more condensed now. The way I currently write code is sort of line per thought I have. So my question is how would an experienced developer write this same code? Or rather, how could I refactor this code?
Try the following:
$(function () {
var $handlers = $('.buy-it-now.ribbon, .bid-to-beat.ribbon');
$handlers.click(function() {
$handlers.toggleClass("active inactive");
var $elements = $(".bid-now, .add-to-cart"),
$buyElement = $(".buy-now");
if($(this).is('.buy-it-now.ribbon')) {
$elements.hide();
$buyElement.show();
} else {
$elements.show();
$buyElement.hide();
}
});
});
This question would be better suited for codereview, but yes it can be condensed a little using method chaining.
$(function () {
$(".buy-it-now.ribbon").click(function () {
$(".bid-to-beat.ribbon").removeClass("active").addClass("inactive");
$(".buy-it-now.ribbon").removeClass("inactive").addClass("active");
$(".bid-now").hide();
$(".buy-now").show();
$(".add-to-cart").hide();
})
$(".bid-to-beat.ribbon").click(function () {
$(".buy-it-now.ribbon").removeClass("active").addClass("inactive");
$(".bid-to-beat.ribbon").removeClass("inactive").addClass("active");
$(".buy-now").hide();
$(".bid-now").show();
$(".add-to-cart").show();
});
});
You could condense it further by pre selecting the elements and caching them in variables before the click events as long as no elements are added or removed during the life of the page.
As your code it is you can combine some of the selectors into a single line. And also because your elements looks to be static you can cache them into a variable and use them later as it reduces the number of times a element is looked up in the DOM reducing the accessing time..
Also you can limit the scope of these variables or selectors by encasing them in an object or a closure..
Maybe something in these lines..
$(function () {
cart.init();
});
var cart = {
elems : {
$buyRibbon : null,
$bidRibbon : null,
$bidNow: null,
$buyNow: null,
$addToCart: null
},
events : {
},
init : function() {
this.elems.$buyRibbon = $(".buy-it-now.ribbon");
this.elems.$bidRibbon = $(".bid-to-beat.ribbon");
this.elems.$bidNow = $(".bid-now") ;
this.elems.$buyNow = $(".buy-now") ;
this.elems.$addToCart = $(".add-to-cart") ;
this.events.buyClick();
this.events.bidClick();
}
};
cart.events.buyClick = function() {
cart.elems.$buyRibbon.on('click', function(){
cart.elems.$bidRibbon.removeClass('active').addClass('inactive');
cart.elems.$buyRibbon.removeClass('inactive').addClass('active');
cart.elems.$bidNow.hide();
cart.elems.$buyNow.show();
cart.elems.$addToCart.hide();
});
}
cart.events.bidClick = function() {
cart.elems.$bidRibbon.on('click', function(){
cart.elems.$buyRibbon.removeClass('active').addClass('inactive');
cart.elems.$bidRibbon.removeClass('inactive').addClass('active');
cart.elems.$bidNow.show();
cart.elems.$buyNow.hide();
cart.elems.$addToCart.show();
});
}
So basically in here your whole cart is a object ..And the cart has different properties which are related to this.. You follow the principles of object oriented programming here..
Using closures I heard gives you better design limiting the scope of your code..
Might I suggest something like this:
$(function () {
var buyNowButton = $('buy-it-now.ribbon'),
bidToBeatButton = $('.bid-to-beat.ribbon'),
buyNowEls = $('.buy-now'),
bidToBeatEls = $('.bid-now,.add-to-cart');
var toggleButtons = function(showBuyNow){
buyNowButton.toggleClass('active', showBuyNow);
bidToBeatButton.toggleClass('active', !showBuyNow);
buyNowEls.toggle(showBuyNow);
bidToBeatEls.toggle(!showBuyNow);
}
buyNowButton.click(function(){ toggleButtons(true) });
bidToBeatButton.click(function(){ toggleButtons(false) });
});
You could save a some lines by removing the selectors at the start and just do the selection in place, if the saved space would be more important than the minor performance hit. Then it would look like this:
$(function () {
var toggleButtons = function(showBuyNow){
$('buy-it-now.ribbon').toggleClass('active', showBuyNow);
$('.bid-to-beat.ribbon').toggleClass('active', !showBuyNow);
$('.buy-now').toggle(showBuyNow);
$('.bid-now,.add-to-cart').toggle(!showBuyNow);
}
$('buy-it-now.ribbon').click(function(){ toggleButtons(true) });
$('.bid-to-beat.ribbon').click(function(){ toggleButtons(false) });
});
The first version selects the elements once and holds them in memory; the second selects them each time the button is clicked. Both solve the problem I believe would occur with the selected answer where clicking the same button twice would cause the .active and .inactive classes to get out of sync with the shown/hidden elements.

Using jquery to see if selector pulled any divs, find a div thats specific to example page

I'm pretty new to jquery, this is what i need help with: Using jquery to see if a selector pulled any divs, find a div thats specific to example page. See if first condition is false and if so redirect to example page. Thanks for any help!
Jquery partial code: "
$('.assessment-start').click(function () {
$('#startAssessmentDialog').empty();
//block
$('#startAssessmentDialog').block(_blockUISettings);
//block
var link = $('#startAssessmentDialog').attr('link');
AjaxUtil.Services.PageProxy.SendData(link, GLOBAL._HTTPVerbs.GET, {},
function (data) {
var $data = $(data);
$('#startAssessmentDialog').html($data.find('#surveyContainer'));
$('div[name*="*"]').val('*');</script>
// hide the unmapped capability areas
$("#unmappedCapabilityAreas").hide();
// unblocking
$('#startAssessmentDialog').unblock();
// unblocking
},
function (exception) {
AjaxUtil.DefaultExceptionHandler(exception);
$('#startAssessmentDialog').unblock();
}
);
"
Html code:
<div link="/Survey/details/#Global.CGSs[Model.CGSVersionID.Value].SelfAssessmentSurveyResourceID/#Model.ResourceID" id="startAssessmentDialog" class="noDisplay">
</div>
Seeing if selector got any divs:
var selector_pulled_divs=($(selector).filter("div").length!=0)
We'd need some code to work with to help you further.
You can check with nodeName property:
if ($(".selector").get(0).nodeName == 'div') { \\do stuff }
I think you're trying to do something:
if( $('#selector').length ) {
// do something if selector pulled a div
} else {
// do something if selector not pulled a div
// for page redirect write following line
window.location = 'YOUR_URL';
}
$('#selector').length will check the exists of div with id=selector.

Assign dynamic div id from js var

I am having trouble selecting a div with jQuery after assigning the id to a Javascript variable:
$(function() {
$(".do").live("click",function()
{
var id = $(this).attr("id");
$.ajax({
//reload div using js var id
$('id').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
});
return false;
});
});
When I call a static div it works just fine like this:
$('#staticdiv').fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
How can I select a div from a Javascript variable containing its id?
*EDIT
Here is an example if the divs:
Button to engage reload
click to reload
DIV to reload:
<div id="12">to be refreshed</div>
keep in mind the "12" us dynamic and could be any variable.
You can do that using this:
$("#"+id).fadeOut() // ...
However, I wouldn't recommend doing it that way (it won't work on things without IDs); try this instead (which should work on things without IDs):
$(".do").live("click", function() {
var me = $(this);
$.ajax({
// ...
success: function(data) {
me.fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");
}
// ...
});
return false;
});
Additionally, I'm not sure if you really want that .fadeOut().load().fadeIn() chain; the load will not wait for the fadeOut to finish and the fadeIn will not wait for the load to finish (although the fadeIn will wait for the fadeOut to finish). If you have problems with that, you should try this:
me.fadeOut('fast', function() {
me.load('http://www.example.com/get.php', function() {
me.fadeIn('slow');
});
});
Aren't you supposed to use the variable id instead of string 'id'.
As follows:
$('#'+id).fadeOut('fast').load('http://example.com/get.php').fadeIn("slow");

Categories