Group similar jquery click events together - javascript

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

Related

JavaScript to find whether any div with a particular class was hovered over and then identify the exact div

Here is my HTML:
<div id="doc1" class="document-container-title">
<h3>Doc 1</h3>
</div>
<div id="doc2" class="document-container-title">
<h3>Doc 2</h3>
</div>
<div id="doc3" class="document-container-title">
<h3>Doc 3</h3>
</div>
As you can see, each div has a class of 'document-container-title'. I want to add some JavaScript to detect if any one of these divs were hovered over, and then I want to find out which specific div was hovered over. Specifically, I want to be able to detect whether a div with the class of document-container-title was hovered over. If so, then I want to get the id of the exact div that was hovered over.
I am only one month into JavaScript so a helpful explanation wouldn't hurt.
Thanks.
P.S. I don't mind using jQuery.
you can use jQuery mouseover or mouseenter event based on your requirement like this:
Based on this:
The mouseover event triggers when the mouse pointer enters the div
element, and its child elements.
However
The mouseenter event is only triggered when the mouse pointer enters
the div element.
$(".document-container-title").mouseover(function (e) {
console.log(e.currentTarget.textContent);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="doc1" class="document-container-title">
<h3>Doc 1</h3>
</div>
<div id="doc2" class="document-container-title">
<h3>Doc 2</h3>
</div>
<div id="doc3" class="document-container-title">
<h3>Doc 3</h3>
</div>
One solution is this one:
const elements = document.getElementsByClassName('document-container-title')
for (let element of elements) {
element.addEventListener('mouseenter', (e) => {
console.log(e.target.id);
});
}
First, you will iterate over your DOM to get all elements with the specified class. The defined constant elements is now an array of html elements that have the document-container-title class. After that, you will have a simple for loop to iterate over all gathered elements. Finally, you will add an event listener for the current element in the for loop that will trigger the mouseenter event. Then, you can easily get the target with their corresponding id.
Reproduction link

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

Hiding and showing divs when the amount of divs is unknown

I have a page with multiple posts divs and have a hidden comment form for each post. What is the best way to utilize JQuery/JavaScript to display only the comment form for that post after a button or link is clicked.
<div class="post">
<p>Some Content</p>
Comment
<div class="commentForm" style="display:none"></div>
<div>
$('.commentButton').on('click', function(){
$(this).next().slideToggle();
});
Delegate the click event to the commentButton which should toggle the commentForm. Inside of the event, move to the next element, and perform a slideToggle(). In this way, clicking on the comment button will both show and hide only the next one.
Further to the point, if you wish to hide all other commentForms so only 1 is open at a time, you can simply add:
$('.commentForm').hide();
before you perform the .slideToggle().
put id in your div
<div class="commentForm" id="myID" style="display:none"></div>
now in script
if(someCondition) {
document.getElementById('myID').style.display = 'hidden';
}else {
document.getElementById('myID').style.display = 'visible';
}
next() might not always be working because many times an element is not after the button (that triggers the action) itself.
If that is the case you can do the following:
$('.commentButton').on('click', function(){
$(this).parents('.post:eq(0)').find('.commentForm(0)').show();
// or: fadeIn(500); / fadeOut(500);
// or: slideToggle(); / slideUp(); / slideDown();
// or: css('display, 'block'); / none
});
This will find it's first parent with the class post and than the element inside it with the class commentForm even if its inside another element or in another etc.
In the example of yours you dont nescesaraly need it, but think of just selecting elements that do not have any classes or IDs :)

Toggle css of 1 of multiple classes of the same name

I have dynamically created divs..
<div class="container"></div>
Each div has an input element within it..
<div class="container">
<input type="button" class="container_button" value="toggle" />
</div>
My goal is to minimize only the container div of the button clicked..
$('.container_button').onclick(function() {
$('.container').css('height','20px');
});
How can I achieve this when multiple divs of the same class exist?
jQuery object doesn't have onclick method, you can use on method instead, as you are generating the element dynamically you should also delegate the event.
$(document).on('click', '.container_button', function() {
$(this).parent('.container').css('height','20px');
// ^--- clicked element
});
You need to find .container relative to the DOM element that was clicked.
$('.container_button').click(function () {
$(this).closest('.container').css('height', '20px');
});

Categories