How to append all the same class jquery? - javascript

in my website, I want to append a div below to a class, I have a lot of same class. The website is selling T-shirt, each item has the .color class. Each time, when I refresh the page, it only append to one item, when I go to the second item, the div won't append. #myshop is loading from other site, so that's why I need to use append to add the message. The reason I use setTimeout because #myshop is be load after the page load, so I have to delay it. You can check it out on my url, www.sayhitoworld.com, click any item, you will see the message below the color, go back, and click another item, the message won't append any more. Appreciate your time.
jQuery('#myshop').one('click', function(){
setTimeout(append_color, 1000);
});
function append_color(){
jQuery('.color').append("<div id='append_color' >Note: If the T-shirt had the same color as the character's hair or body, you won't see the shape, still cool though.</div>");
}

Are the items on the same page? If so this div will only append to the first item because of the div has an ID. ID's need to be unique so only one div called append_color can exist per page. Why not append a class called append_color and see if that works for you.
function append_color(){
$('.color').each(function(){
$(this).append("<div class='append_color' >Note: If the T-shirt had the same color as the character's hair or body, you won't see the shape, still cool though.</div>");
});
}

try:
$('.color').each(function(i, obj) {
$(obj).append(<your_template>);
});

Try switching to the on method, instead of one (if possible), that is why the function only fires once. From the docs:
.one( events [, data ], handler ):
Attach a handler to an event for the elements. The handler is executed
at most once per element per event type.
Try something like this instead:
jQuery(document).on('click', '#myshop', function(){
setTimeout(append_color, 1000);
});
function append_color(){
jQuery('.color').append("<div id='append_color' >Note: If the T-shirt had the same color as the character's hair or body, you won't see the shape, still cool though.</div>");
}

Related

Add overlay on specific images selected (no more than 3)

I have a grid of cards, right now clicking one of the cards adds an overlay to all of them.
I need:
1.- If user clicks one cards, and only that card gets the overlay.
2.- No more than 3 cards at a time can have an overlay. User would have to click one of the already clicked cards to diselect it, in order to select another one.
Codepen:
https://codepen.io/ogonzales/pen/yLJGzYr
JS Code:
$('.imageDiv').click(function(){
$('img').toggleClass("tricky_image");
$(".text").toggleClass("display-inline");
});
Expected result:
Try this instead. Make use of this so that the relevant scope is preserved.
$('.imageDiv').click(function(){
$(this).find('img').toggleClass("tricky_image");
/*$(".text").css("display", "inline");*/
$(this).find(".text").toggleClass("display-inline");
});
You could equally (maybe) use the .children() method (as opposed to .find()) but I didn't know exactly how your dom structure was inside each "imageDiv".
Your specified click function search for every 'img' element and every node with a .text class.
What you actually want, is to get the child img element and .text of the clicked .imageDiv
By limiting the queried scope with $(this).find(...) we only search for child elements of the clicked .imageDiv.
With some additional logic your second requirement can be also fulfilled ->
$('.imageDiv').click(function(){
const trickyCount = $(".tricky_image").length;
const img = $(this).find('img');
const text = $(this).find(".text");
if(trickyCount < 3 || img.hasClass("tricky_image")){
img.toggleClass("tricky_image");
text.toggleClass("display-inline");
}
});

Enable scroll onClick

I'm working with 2 divs, the first div should fill the whole screen (width & height) and once there is a button or link clicked in it, it should enable the scroll besides take to the second div.
I have been able to set something like this https://codepen.io/malditojavi/project/editor/ZgWYrZ/#0 But I'm unable to change the class of the with my own class 'allowscrolling' that would re-enable that scroll.
I used this function
allowScrolling() {
document.getElementByTagName("body").className = "allowscrolling";
}
Also tried via jquery, with:
<script>
$("button").click(function(){
$("body").css("overflow","scroll");
});
</script>
But both won't enable scroll after I click the first link. Anything I'm missing?
There is no getElementByTagName that returns a single element. There is a getElementsByTagName that returns an array. Use that and get the first element of the arrray to set the class
document.getElementsByTagName('body')[0].className = 'allowscrolling';
document.getElementsByTagName('body')[0].className += ' allowscrolling';
This will do, you can't use jQuery if you don't load it in your project.

Put li attribut on a span

I am a beginner in the wonderful world of dev and I need help from you. Let me explain :
I have a menu that deploys when pressing on the burger and thus reveals three items .
On the one hand I am that when you click on an item the menu closes
And on the other hand I am cut the item to appear in the SPAN :)
$('li').click(function() { alert($(this).attr('id'));})
Thank you for your help.
DEMO JSFIDDLE
Envoy Everybody
simple as this : jsfiddle
added this
$('li').click(function() {
$('h1 + span').text( $(this).attr('id') )
$('#overlay').removeClass('open');
$('#toggle').removeClass('active');
})
also removed the class open from #overlay so after you click the li the menu closes, and removed the class active from the button so it changes from X to the hamburger lines . you can exclude these two lines if you don't need them
You successfully got the value of the id; now you just need to get the element you want to add it to, and add it.
Instead of putting the value in an alert, you'll use the value in jquery's text() function (assuming that you want the ID to be inside the <span> tag).
First, get the <span> element you want:
$('.top')
This gets all the elements with the class "top".
Now call the text() function (more info here: http://api.jquery.com/text/) on the element:
$('.top').text('your text here');
Instead of 'your text here', put the value of the ID in, like this:
$('.top').text($(this).attr('id'));

add class to next element jquery click function

I have created a vertical slider and I want the classes to move onto the next div on click (next) and previous on click (prev)
here is my code and fiddle
$(".bxslider-inner:nth-child(4n+1)").addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").addClass('Blur3');
$("a.bx-next").click(function(){
$(".bxslider-inner:nth-child(4n+1)").next().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").next().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").next().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").next().addClass('Blur3');
});
$("a.bx-prev").click(function(){
$(".bxslider-inner:nth-child(4n+1)").prev().addClass('noBlur');
$(".bxslider-inner:nth-child(4n+2)").prev().addClass('Blur1');
$(".bxslider-inner:nth-child(4n+3)").prev().addClass('Blur2');
$(".bxslider-inner:nth-child(4n)").prev().addClass('Blur3');
});
Classes seem to be colliding with each other. I'd suggest cleaning current classes before adding the 'blur' classes, e.g. :
$(".bxslider-inner:nth-child(4n+1)").next().removeClass().addClass('bxslider-inner').addClass('noBlur');
etc... Problem is it only works for he first click on the button, as
$(".bxslider-inner:nth-child(4n+1)").next()
Will always be the same element. You now need to find a way to fetch the right elements on your click function.
Some elements here : In bxslider i want to add a class on current slide
They seem to be on the same level of the DOM tree, so you would use:
$(this).next().click();

jquery not reacting to class changes?

So I've got this assignment I've got to do, it has to do with a christmas tree where you can click the branches and turn them into ornaments and whatnot.
When the tree is on, you should not be able to change the ornaments.
So far i've got this jquery:
$('.branch1, .ornament1, .light1').click(function()
{
alert("WARNING - Power off the tree first!");
die();
});
$('.branch, .ornament, .light').click(function()
{
this.className =
{
light : 'branch', branch: 'ornament', ornament: 'light'
}[this.className];
});
$('#treePowerButton').click(function()
{
$(".branch, .branch1").toggleClass("branch branch1");
$(".ornament, .ornament1").toggleClass("ornament ornament1");
$(".light, .light1").toggleClass("light light1");
$(".powerStatus, .powerStatus1").toggleClass("powerStatus powerStatus1");
});
$('#treeClearButton').click(function()
{
$(".ornament").toggleClass("ornament branch");
$(".light").toggleClass("light branch");
});
But when I turn the tree on and click a branch or ornament it doesn't throw the alert, it just makes the clicked item completely disappear. What am I doing wrong?
here's a jsfiddle: http://jsfiddle.net/a1smjgrv/
Refined Answer:
Try this jsfiddle: http://jsfiddle.net/a1smjgrv/5/. It will accomplish what you're looking for and is much simpler than trying to bind multiple click events on the same element.
Original Answer:
The problem is that when the page is loaded, there are not any 'branch1', 'ornament1', or 'light1' elements on the page, so the click event containing the alert() is not being bound to anything. There are only 'branch' elements on the page, so the click events for the branches are all that's bound.
When the tree is powered ON and the 'branch' elements are changed to be a 'branch1' class, the click event containing the className update are still attached to that element. So, when it tries to update the class name based on your object literal ({light: 'branch', branch: 'ornament', etc...}), it can't find a match for any of those because the class name of the given element is now 'branch1' instead of 'branch', so it's setting the class name on the element to 'undefined' (hence, the disappearance).
If you want a function to be bound to an element at any point in time that the element is rendered to the page, you'll need to bind it at the document level instead. Something like the following:
$(document).on('click', 'branch1', function() {
alert('SHAZAM!');
});

Categories