I am trying to figure out what button a user has clicked inside a DIV container, but I must be doing something wrong here. I keep getting a no attributes error. Can anyone tell me if I am doing something wrong? Here is my JS:
// Bind ButtonClicks
$('#jplayers .button').on("click",function(e){
alert("Class :" + e.attr("class"));
// Determin what button
if( e.attr("class").indexOf("play") > 0 ){
// Play Clicked
player.jPlayer("play");
}else{
// Pause Clicked
player.jPlayer("pause");
}
});
Here is my HTML:
<div id="jplayers">
<!--First Player-->
<div id="zen_1">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
<!--Second Player-->
<div id="zen_2">
<span class="player"></span>
<span class="circle"></span>
<span class="progress"></span>
<span class="buffer"></span>
<span class="drag"></span>
<div class="button">
<span class="icon play"></span>
<span class="icon pause"></span>
</div>
</div>
</div>
Thanks for any help
You can get the class by using this.
$(this).attr("class")
The e that you're using isn't the element but the click event.
$('#jplayers .button').on("click",function(e){
alert("Class :" + $(this).attr("class"));
});
Here in your case you can make use of the e parameter in the callback method in the click event.
e.target returns the respective element this being clicked by the user.
$('#jplayers').on("click", function (e) {
// using this you can access the specific element
var className = $(e.target).prop('class');
if (className.indexOf("play") !== -1 || className.indexOf('pause') !== -1) {
alert(className);
// you can access it using $(e.target)
}
});
JSFiddle (with a simple sample code)
Related
I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 4 years ago.
I have a web page, with an index that slides in from the side. What I want, is that when I click anywhere except the index object, the index should close. To solve this, I first need to be able to select all elements except for the index, but I'm having a hard time doing this, because I have to use event delegation (I have dynamically loaded DOM elements).
I understand this may have been asked before, but the solutions in the other answers do not work for me since I'm using event handling, and I don't have enough of an understanding of jQuery to figure out how tho implement their answers.
I tried this, but it hasn't worked out for me:
$(document).on('click','*:not(.index)',function(e) {
alert("clicked")
return false;
});
The complete html code (minified) is this:
<html>
<div class="header" id="messenger">
<div class="header-text">
<span>Dodecahedron-n</span>
</div>
</div>
<div class="topnav">
Dodecahedron-n
Scripts
Index
Sort: Newest
<i class="fa fa-bars"></i>
</div>
<div class="no-click index">
<div class="no-click index-heading">
<span class="no-click vertical-center">Index</span>
</div>
<div class="no-click scroll-down-prompt">
<span class="no-click vertical-center">Scroll Down <i class="fa fa-level-down"></i></span>
</div>
<div class="no-click wrapper">
<div class="no-click index-content"></div>
</div>
<div class="no-click index-close-btn-container">
<span class="no-click vertical-center">Close <i class="fa fa-close"></i></span>
</div>
</div>
<div class="index-tab">Index <i class="fa fa-caret-square-o-right" style="color: #F45C43"></i></div>
<div class="page"></div>
<div class="footer">
<span class="main">Dodecahedron-n</span>
<span class="side">Copyright <i class="fa fa-copyright"></i> Aarush.K 2019</span>
</div>
<script>
$(function(){
$(document).on('click','*:not(.index > *)',function(e) {
alert("clicked")
return false;
});
});
</script>
try
$(document).on('click',function(e) {
var inIndex = $(e.target).closest('.index').length > 0;
if (!inIndex){
// close the index
}
});
Your original code does not work because a child of .index would still be matched by '*:not(.index)' which targets all elements except .index itself only.
$(document).on('click', '*', function(e) {
if (!$(this).hasClass('index')) {
alert("clicked")
return false;
}
});
should work (but not tested)?
You can also try something like this:
$(document).on('click','body:not(.index)',function(e) {
alert("clicked");
console.log(e.target);
if (e.target.nodeName === 'div') {
return false;
}
});
In e.target you should now have the element you clicked on. You can then test for classes, for IDs, or even the type of the node (div, a, span, ....)
In my example I return false when the targetNode is a div, but modify the "if" to do exactly what you want.
I have a dynamic div
<div class="illustartionWrap" id="illustartionWrapId">
<div class="illusList illusListTop" id="illusList_heading">
<span class="fileName">File Name</span>
<span class="fileDesc">Description</span>
<span class="fileSize">File Size</span>
<span class="fileDownload">Download</span>
</div>
<div class="clear"></div>
<div class="illusList">
<span class="fileName">fileTitle</span>
<span class="fileDesc">fileDesc</span>
<span class="fileSize">1.18 MB</span>
<span class="fileDownload">
<a href="http://myfile/file.txt">
<img src="/sites/all/themes/petheme/images/myimage.png">
</a>
<a href="#">
<img id="illFile_6" class="illDeleteFile" src="/sites/all/themes/petheme/images/icons/deleteButton.png">//clicking it to delete the file from db
</a>
</span>
</div>
</div>
How to get the parents of this delete button and find the filetitle class to get the title of the file.
Below is click handler which I wrote
/**delete function for my page**/
jQuery(".illDeleteFile").on("click", function() {
var illDeleteId = jQuery(this).attr("id").split("_");
var illFileTitle = jQuery(this).parent("#illusList").children(".fileName").val();
alert (illFileTitle);
});
I checked with jQuery Parent() , Parents() and children() and also find() but I am getting undefined mostly and not getting the title.
How to achieve this?
JSFIDDLE : http://jsfiddle.net/hiteshbhilai2010/ywhbd9ut/14/
See this,
jQuery(".illDeleteFile").on("click", function() {
var illFileTitle =jQuery(this).closest(".illusList").find(".fileName").html();
alert (illFileTitle);
});
You'll want to use:
var illFileTitle = jQuery(this).closest(".illusList").find(".fileName").text();
alert(illFileTitle);
Hey guys – I have the following HTML:
<div>
<span class="icon">
Technology
</span>
</div>
<div>
<span class="icon">
Design
</span>
</div>
<div>
<span class="icon">
Management
</span>
</div>
I'm looking for a short and sweet jQuery snippet that will detect the value in the link, and add that value as a class name for to the span, resulting in the following:
<div>
<span class="icon Technology">
Technology
</span>
</div>
<div>
<span class="icon Design">
Design
</span>
</div>
<div>
<span class="icon Management">
Management
</span>
</div>
I am using:
var categoryName = $(".icon a", this).html();
$(".icon").addClass(categoryName);
But it is only taking the value of the first link and applying that as the class name for each span.
Thanks for the help as always!
$(".icon").each(function(){
$(this).addClass($(this).find("a").html());
});
JSFiddle
You can also do this with a loop:
var spans = $(".icon");
for(var i = 0; i < spans.length; i++)
{
var cspan = $(spans[i]);
$(cspan).addClass($(cspan).find("a").html());
}
JSFiddle
use .each() to iterate over all span with class icon.:
$('.icon').each(function(){
$(this).addClass($(this).find('a').html())
})
Working Fiddle
You can run this on page load or under some event:
$(".icon").each(function(){
var name = $(this).find("a").text();
$(this).addClass(name);
});
You can use:
1) $.each() to loop through the span with class icon
2) .find() to find the child anchor inside your span
3) .text() to get the text of the found anchor:
$.each($('span.icon'), function(){
$(this).addClass($(this).find('a').text());
});
Fiddle Demo
I have the following HTML code
<div id="id0_0" class="clearfix" style="margin-left:40px">
<div id="id0_1" class="choice">
<span id="spanradio_1" class="radio"> </span>
<span id="spanlabel_1" class="label"><label id="label_1">Indoor</label></span>
</div>
<div id="id0_2" class="choice">
<span id="spanradio_2" class="radio"> </span>
<span id="spanlabel_2" class="label"><label id="label_2">Outdoor</label></span>
</div>
</div>
with the following jQuery:
jQuery('.choice').click( function(e) {
alert('clicked!! ' + e.target.id);
var src_ele = $(e.target);
e.stopPropagation();
return false;
});
However, my click is triggering on the spanradio's & label's and not the div's. Any reason what is causing this?
Thanks!
Basically:
this is the element you bound the event to (i.e. one of the elements in the set that you called .on on)
e.target is the deepest element you clicked on
So you want this.id.
e.target is the element that the user actually clicked on.
If the user clicked on a nested element, e.target will be that element.
because the label is the ONLY content in a ".choice"-element and therefore is on the TOP --> it's actually the element, you clicked on...
check out event.relatedTarget if this is the right one for you.