We Keep Coding

Group similar jquery click events together

I'm trying to group together jQuery click events for similar elements. Basically, I have the main div I want to add new classes to when a particular button is clicked. So I have
<div class="main"></div>
and I want to add new classes to that div depending on a few buttons I have
<div class="triggers">
<div class="changer" id="blue">Blue</div>
<div class="changer" id="red">Red</div>
<div class="changer" id="green">Green</div>
</div>
So I have the classes made up in CSS and then of course add them to the main div based on each of those buttons ID's being clicked
$(document).ready(function(){
$('#blue').click(function() {
$(".main").addClass("blue").delay(500).queue(function(){
$(this).removeClass("blue").dequeue();
});
});
$('#red').click(function() {
$(".main").addClass("red").delay(500).queue(function(){
$(this).removeClass("red").dequeue();
});
});
$('#green').click(function() {
$(".main").addClass("green").delay(500).queue(function(){
$(this).removeClass("green").dequeue();
});
});
});
My question is how can I go about grouping these click events together so that I'm not repeating the same code block over and over again based on each button's ID?

Register the click event on the common class, then grab the id which is the colour?
$(".changer").click(function() {
let colour = String($(this).attr("id"));
if (colour) {
$(".main").addClass(colour).delay(500).queue(function(){
$(this).removeClass(colour).dequeue();
});
}
})

select single link on mouse hover

I'm trying to make the hyperlinks on my website have a certain css animation effect.
My code:
$("a").mouseenter(function() {
this.addClass("myeffect");
}
It works fine so far, but when I hover a link, every link on the website start showing the effect, not only the one I've mouse-hovered.
How can I have only the link which is being hovered show the effect?

You are referencing this incorrectly.
$("a").mouseenter(function() {
$(this).addClass("myeffect");
}

Simple this return you the current element/node. And there is no addClass method available to it.
You need to select that element from the node and add class to it.
$(this) will select that particular element
$("a").mouseenter(function() {
$(this).addClass("myeffect");
})
.myeffect{
color : red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
1
2
3
4
5

Hide closest div on click

Im trying to figure out how to hide my divs on click, I have two foreaches so it will be multiple equal divs created meaning same class names and stuff so I figured using .closest to hide/show the one I click. If the foreach creates 4 divs and I click one of them I want that one to hide/show.
Also, see comments in following code
#foreach ())
{
<div class="vwHoldLiftInfo"> // Bigger div
<a class="liftVariTitle">#variants</a><br /> // Click THIS..
<div class="vwSetRepHolder #cssClass"> // To hide THIS..
#foreach ())
{
<a>#d.sett x #d.rep #d.kg</a><br />
}
</div>
</div>
}
This is the script I tried with but it hides all the divs! Can this be done?
$(function() {
$(".liftVariTitle").click(function() {
$(".vwHoldLiftInfo").children('div').hide(); // .closest/.children?
});
});

(I only want to hide the div thats closest to the a tag) you need to use $(this)
$(function() {
$(".liftVariTitle").click(function() {
$(this).closest(".vwHoldLiftInfo").find('.vwRepSetHolder').hide(); // .closest/.children?
});
});

Toggle specific class element with onclick

Currently I have an unordered list of about 10 of these "container"s.
Each container has a description and a "help-more-content" button.
<div id="item" class="container">
<div class="item">UniqueIdentifierInt</div>
linkName
<div class="trackUri">someLinkUrlString</div>
<div class="description" style="display: none;">DescriptionString</div>
<a class="mt-help-more-content" href="#"></a>
</div>
The functionality is supposed to be when you hit the "help-more-content" button for this container, it will then display that containers description.
However at the moment when the button is clicked, it shows the description for ALL containers on the screen.
Here is the current on click
.on("click", ".mt-help-more-content", function(e) {
$('.description').toggle();
}
Now obviously this toggle function is being called on all "description" elements. How can I specify for it to only act on the current container?
I've checked out other answer here, here, and here but to no real avail.
Is it possible to only toggle the specific class? It doesn't seem you can toggle by an id.
I am new to javascript/html since my background is with Java, so apologies if this is something simple.
Any help is greatly appreciated thank you.

$.prev will do the trick:
.on("click", ".mt-help-more-content", function(e) {
$(this).prev('.description').toggle();
}

This should work:
.on("click", ".mt-help-more-content", function(e) {
$(this).siblings(".description").toggle();
}

jquery specific show buttons on hover

I have an application creating a bunch of divs through a loop.
Each div has the class "product"
so it looks like
<div class="product">
!.....stuff here ....!
<div class="show_on_hover">...buttons here... </div>
</div>
so there are about 12 of these same divs per page.
I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.
$('.product').hover(function() {
$(.show_on_hover).show();
},
function () {
$(.show_on_hover).hide();
}
);
That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.
Thanks!

find will find your .show_on_hover divs inside the hovered .product. Try this:
$('.product').hover(function() {
$(this).find('.show_on_hover').show();
},
function () {
$(this).find('.show_on_hover').hide();
}
);

Try
$('.show_on_hover', this).show()/.hide()
Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.