I have a three button navigation panel, comprising of three divs and an anchor. On mouse over, myFunction() assigns a class to the three divs and anchor tag, for styling purposes.
<nav>
<div id="btn1" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
<div id="btn3" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
<div id="btn2" class="button" onMouseOver="myFunction();">
<div id="btn_bdr1">
<div id="btn_bdr2">
</div>
</div>
</div>
</nav>
What I need to do is find the ID of the div which called myFunction(), so I can make a change within the function to only the calling div, not all three.
Using JavaScript only, how can I go about doing this.
Thanks in advance.
There is two ways you can do is
1) Send an argument to the method with the div's name
Example
<div id="btn1" class="button" onMouseOver="myFunction('btn1')">
2) Send the element this
Example
<div id="btn1" class="button" onMouseOver="myFunction(this)">
In the javascript you can then do
myFunction(element) {
//element is now the element you clicked on
}
You can use the event object and look at the target (e.target). This is a reference to the element itself so to get the ID you would simply access the element's id property. (e.target.id)
document.querySelectorAll('.a').forEach(function(ele, ind) {
ele.addEventListener("mouseover", function(e) {
console.log(e.target, e.target.id);
})
});
.a {
height: 40px;
width: 40px;
border: solid black 3px;
margin-top: 5px;
}
<div class="a" id="one"></div>
<div class="a" id="two"></div>
<div class="a" id="three"></div>
You can call this.event.target from myFunction() to determine which element generated the event.
For example:
myFunction() {
console.log("I was called by: ", this.event.target);
}
Related
I'm trying to add a class to a specific element that contains a parent container with a unique ID.
I have several buttons contained in a div, and all of them are using the same classes. For some reason, I can't use only $(this), so I created a loop that adds a unique ID to the containers.
HTML
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'></button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'></button>
</div>
</div>
JQuery
$("button").click(function (e) {
e.preventDefault();
var target = $(e.target).parents(".button-container").attr("id");
console.log(target);
$(target).find(".btn").addClass("active");
});
I'm targeting the ID and it works, the console.log gives me back the correct info. However, for some reason, I can't add the class.
Thank you in advance for any help! (:
Edited:
I'm trying to add the class active to the button that is contained in the ID.
Example:
$("#btn-1 .btn").addClass("active"); but with the ID dynamically populate based on the info from the click.
Keep things simple, this should work
$(document).ready(function() {
$("button").click(function (e) {
e.preventDefault();
$(e.target).addClass("active")
});
});
.active{
border: 1px red solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='section'>
<div class='btn-container' id='btn-1'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-2'>
<button class='btn'>Test</button>
</div>
<div class='btn-container' id='btn-3'>
<button class='btn'>Test</button>
</div>
</div>
I just want to add class for the button after another class but it's inside of another div. Take a look at this example.
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom"></div>
.add-me{
color:red;
}
In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)
I tried with this way. But it only apply for wrapper div.
$('.bottom').prev('div').first().addClass('add-me');
Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/
You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.
$(function() {
$(".activate").click(function(){
$('.bottom').show();
$('.bottom').prev().find(':first-child').addClass('add-me');
});
});
.add-me {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>
<br />
<button class="activate">Activate bottom class</button>
I am a beginner.
I want to display the HTML of previous element when the button is clicked.
I am able to display HTML content of button using outerHTML property. But when i use prev() function with the current object, it is showing error.
function show(currentObject) {
alert($(currentObject)[0].outerHTML);
}
above code gives the html content of the current button.
(Click) is shows as alert.
but
function show(currentObject) {
var prevObject = $(currentObject).prev();
alert($(prevObject)[0].outerHTML);
}
above code is giving me error!!
error: TypeError: $(...)[0] is undefined
Below is the html
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12"><p>click below button</p></div>
<div class="col-md-4"><button onclick="show(this)" class="btn btn-primary">Click</button></div>
</div>
Is there a way to do it right?
You can use .prev().html() to getting previous element html, check updated snippet below..
alert($('.currentItem').prev().html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">Previous Element</div>
<div class="item1 currentItem">Current Element</div>
If you want to use pure Javascript use previousElementSibling
document.getElementById('foo').addEventListener('click', currentObject);
function currentObject() {
alert(this.parentNode.previousElementSibling.outerHTML);
}
body {
font: 13px Verdana;
}
<div class="row">
<div class="col-md-12"><a class="navbar-link" href="/somelink">linktext</a></div>
<div class="col-md-12">
<p>click below button</p>
</div>
<div class="col-md-4"><button class="btn btn-primary" id="foo">Click</button></div>
</div>
I would like to simplify the code by not typing each div (#TopicA, #TopicB, #main, etc.) ID that is to be collapsed when an option is selected.
I would like all the divs besides the ones that trigger the button to automatically collapse. How can I make this happen?
Example: When I click TopicA1, I want to collapse all other divs, but I dont want to put all div IDs in JS code.
Demo: JSFiddle
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
$(".ClassButtonA").click(function() {
$("#TopicA").toggle("slow").trigger('reset');
});
$(".ClassButtonA").click(function() {
$("#TopicB, #TopicC, #main").slideUp("slow").trigger("reset");
A single function handles the toggle, and hides all siblings to the currently displayed div. Note that I did modify your structure some -- the content pane div now contains all the divs I wish to show/hide, thus leaving the button pane displaying. Hope it helps!
// Event handler for click on any button el
$(".QA button").click(function() {
// The text of the button matches the id
// of the div els, if I strip spaces.
var toggleThis = "#" + $(this).text().replace(/\s/g, '')
// Using the given string above, toggle that
// div el, and hide all siblings to that.
$(toggleThis).show("slow").trigger('reset').siblings().hide("slow").trigger('reset');
});
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius: 10px;
text-align: center;
}
#TopicA,
#TopicB,
#TopicC,
#TopicA1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" class="QA">
<h2>Title</h2>
<h3>Subtitle</h3>
<button class="ClassButtonA">Topic A</button>
<button class="ClassButtonB">Topic B</button>
<button class="ClassButtonC">Topic C</button>
</div>
<div class="content-pane">
<div id="TopicA" class="QA">
<h2>XX</h2>
<button class="ClassButtonA1">Topic A1</button>
</div>
<div id="TopicA1" class="QA">
<h2>123</h2>
</div>
<div id="TopicB" class="QA">
<h2>YY</h2>
</div>
<div id="TopicC" class="QA">
<h2>ZZ</h2>
</div>
</div>
UPDATED
I think I may have inadvertently made the question confusing. This is an update that is more specific with updated code based on comments and answer I have been given so far. Thank you to everyone that has taken the time to comment and answer.
How can I get the ID of a <div> with the class of .button when I have a click listener for .button. If .button or any of its children are clicked, it should return the ID for that particular div with the class of .button.
This is what I have so far: New JSFiddle
HTML
<div class="row">
<div id="b1" class="button">
<h2>Button 1</h2>
</div>
<div id="b2" class="button">
<h2>Button 2</h2>
</div>
<div id="b3" class="button">
<h2>Button 3</h2>
</div>
</div>
jQuery
var selected = "";
$('.button').on('click', function(e) {
selected = e.target.id;
$('.button').css('backgroundColor', '#becde5');
$('#' + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
This is almost correct but does not propagate, if I click on a <h2> the function does not work. However if I click on the .button div itself it works.
Initial Question
I am trying to create a general function that can identify what child was selected from its parents click listener. The child may have its own children that would all be considered part of the same element so that if any of these children where selected they should also elicit the same response from the click listener.
This is an example of what I have working so far: JSFiddle
HTML consisting of three buttons that all have one child <h2> tag and share the <div class="row"> as their parent.
<div class="row">
<div class="b1 button">
<h2 class="b1">Button 1</h2>
</div>
<div class="b2 button">
<h2 class="b2">Button 2</h2>
</div>
<div class="b3 button">
<h2 class="b3">Button 3</h2>
</div>
</div>
jQuery that listens for a click on <div class="row">. It retrieves the first class name of the clicked element and stores it in a variable. The elicited response in this case is a change of the CSS style background-color though this is arbitrary and would change depending on the use of the function.
var selected = "";
$('.row').on('click', function(e) {
selected = e.target.className.split(" ")[0];
$('.b1, .b2, .b3').css('backgroundColor', '#becde5');
$("." + selected).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
The fact that I am adding a lot of classes to elements purely to identify them on a click seems like it would not scale very well and is generally a bad approach. This method also means that I would always have to put the class name that identifies what element was selected at the beginning of its HTML class attribute. This could potentially clash with other functions using the same method.
Is there a better way to identify what child element was selected from its parents click listener, where a child may have other children that also require the same response from the listener?
EDIT based on the edited question:
I think that what you really want is the id of the element that triggered the event.
But by using e.target you have the target element... which is not necessarily the element that triggered the event.
See in this updated Fiddle.
So simply use $(this) as the selector to retrieve the id... Using .attr("id").
;)
Answer to the initial question:
To determine what can be "selected", I used a "clickable" class.
To avoid using id or class as an identifier to determine what has been clicked,
a data attribute can be usefull.
I used data-id... But you can use whatever you want, like: data-selected or data-target, and assign whatever value to it.
In the below code, I made two exactly identical rows, except their data-id value.
var selected = "";
$('.clickable').on('click', function(e) {
e.stopPropagation(); // To prevent bubbling.
// Reset all bg colors
$('.button').css('backgroundColor', 'initial');
$('.row').css('backgroundColor', 'initial');
// Find exactly what was clicked
if ($(this).hasClass("row")) {
var row = $(this).data("id");
selected = row + " (whole)";
}
if ($(this).hasClass("button")) {
// Find in which row
var row = $(this).closest(".row").data("id");
var btn = $(this).data("id");
selected = btn + " in " + row;
}
// Pale all buttons
$('.button').css('backgroundColor', '#becde5');
// Change bg color of the selected element
$(this).css('backgroundColor', '#3b71c6');
$('#selected').html(selected);
});
.row {
display: table;
width: 100%;
color: white;
border-spacing: 20px;
}
.button {
display: table-cell;
border-radius: 12px;
background-color: #6fa1f2;
text-align: center;
}
#selected {
font-size: 30px;
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Selected : <span id="selected">no selection</span></span><br>
<div class="row clickable" data-id="row1">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>
<br>
<div class="row clickable" data-id="row2">
<div class="button clickable" data-id="btn1">
<h2>Button 1</h2>
</div>
<div class="button clickable" data-id="btn2">
<h2>Button 2</h2>
</div>
<div class="button clickable" data-id="btn3">
<h2>Button 3</h2>
</div>
</div>
no need to id the subject, since it was the one clicked, i.e. e.target which with jQuery you cant select like $(e.target) without any trouble
then you need .closest('.button') to search up to the parent .button (if any)
$('.row').on('click', function(e) {
$('.row > .button').css('backgroundColor', '#becde5');
$(e.target).closest('.button').css('backgroundColor', '#3b71c6');
console.log($(e.target).html());
});
.button {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row">
<div class="button">
<h2>Button 1</h2>
</div>
<div class="button">
<h2>Button 2</h2>
</div>
<div class="button">
<h2>Button 3</h2>
</div>
</div>
If you avoid giving an identifier (classes, IDs, etc) you'd need to do some manual checking for tag type to see what you clicked on (so basically, an identifier as well)
Here's an example, and not very memory efficient method
jsfiddle example
$('.row, .row *').on('click', function(e) {
e.stopPropagation()
$('.button').removeClass('active')
$('.button').css('backgroundColor', '#becde5');
$(this).toggleClass('active')
$('#selected').html(e.target.tagName + ': ' + e.target.className);
});
If you bind a click to div.row and clicked the h2 tag inside the button, and want to manipulate the h2 tag, you could check its tagName- but that less scalable than your OP.