This question already has answers here:
How to ignore multiple classes using the :not selector?
(2 answers)
Closed 5 years ago.
I have a click function in my card game that I would like to include not() in to exclude certain classes but I can't seem to get it to work.
Basically, I would like to make it so that as long as the class does not equal "match" or "open", to proceed with the click event. If they match then do not run the function.
Here is snippet of the updated basic code I am working with now:
function addCardListener() {
$( '.card:not(.match, .open, .show)').on('click', function(){
alert("TEST");
$(this).addClass('open show');
});
}
I tried replacing:
$('.card').on('click', function() {
with:
$( '.card:not(".match, .open")').bind('click', function(){
but it doesn't work. I can proceed with clicking anything in my deck whether or not those classes are defined on the card. What am I doing wrong? Thanks in advance for any help!
Update:
I stripped out all my code and still can't get it to work. Not sure if you will see this update but my board creation is done like this:
function createBoard() {
shuffle(symbols);
match = 0;
moves = 0;
for (var i = 0; i < symbols.length; i++) {
deck.append($('<li class="card"><i class="fa fa-' +
symbols[i] + '"></i></li>'));
}
addCardListener();
};
The click function goes off whether or not the card's class has open match or show on it. I guess I"m confused, I thought with not() the function would not run if the card had those classes. I updated the stripped down version of the function above. Any advice would be greatly appreciated!
Try this - delegate if the cards are inserted dynamically:
$('body').on('click', '.card:not(.match,.open)', function(e) {
console.log(e);
});
Change 'body' to a closer container if possible to speed up the delegation
Related
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
What I am trying to do is to set the same function to different elements with similar id, for example "icon-1","icon-2","icon-3". The function opens up a window that corresponds to those ids -- "window-1", "window-2","window-3". I was trying to use this code block:
for (var i=1; i<=3; i++) {
$("#icon"+i.toString()).click(function(){
$("#window"+i.toString()).show();
)};
)};
Ideally, when "icon-1" is clicked, it opens "window-1", etc. But it's not working.
And I checked console.log(i), every time when a click event occurs, it prints out the final count of i, which is 4.
Is there any way to fix or walk around this?
Thanks a lot!
When you say 'opens up a window', do you mean to open up a popup window or just showing an existing element?
Assuming it's the latter, I would give each of your icons a class that they all share and attach the click handler to elements with that class rather than using three different click handlers. Then use the data attribute to store the corresponding window number:
<div class="icon" data-window="1">This is an icon</div>
<div class="icon" data-window="2">This is an icon</div>
$('.icon').click(function(){
var windowNum = $(this).data();
$('#window-' + windowNum).show();
});
Try classes to achieve that.
$('.yourIconClass').each(function() {
$(this).click(function(){
$('.yourWindowClass').eq($(this).index).show();
});
});
I wouldn't use a for loop for this. I don't use query, so I'll speak in javascript.
I would assign the buttons/icons to variables in javascript and then just have an event listener for each of the buttons. That event listener will send a value to a function that will determine which window to open:
var button1 = document.getElementById("button_1_id");
var button2 = document.getElementById("button_2_id");
var button2 = document.getElementById("button_2_id");
button1.addEventListener('click',function(){
triggerWindow(1);
});
button2.addEventListener('click',function(){
triggerWindow(2);
});
button3.addEventListener('click',function(){
triggerWindow(3);
});
function triggerWindow(input) {
if(input === 1){
/* code to trigger window one */
}
else if(input === 2){
/* code to trigger window two */
}
else if(input === 3){
/* code to trigger window three */
}
}
In my previous question I asked about how can I toggle a textarea with a paragraph. I got the answer. Now I want to do the opposite of it. First I was showing the already hidden textarea + 2 buttons by a click of a hyperlink. Now on the click of one of the buttons I want to hide the text + 2 buttons and show the paragraph that was first already shown.
I have tried this JS so far but it's not working:
$(document).ready(function () {
$(".no_link").click(function (e) {
e.preventDefault();
});
$(".edit_offer").on('click', function () {
toggleEditPanel($(this));
});
$("#cancel_edits").on('click', function () {
$(this).closest("button").hide();
$(this).closest("textarea").hide();
$(this).closest("p.content").show();
});
});
function toggleEditPanel(link) {
link.parent().parent().parent().find("textarea").toggle();
link.parent().parent().parent().find("button").toggle();
link.parent().parent().parent().find("p.content").toggle();
}
But its not working. How can I solve this error?
If I am trying to call the function toggleEditPanel() again. Its not working then aswell.
You can find the markup in the fiddle. Here's the fiddle.
UPDATE 1:
Just came up with a solution. I can use the $.siblings() function to toggle the elements beside the button. Still, is there any better solution?
Here's the code that I came up with:
$("#cancel_edits").on('click', function () {
$(this).hide();
$(this).siblings("button").hide();
$(this).siblings("textarea").hide();
$(this).siblings("p.content").show();
});
UPDATE 2:
The problem in the above code is that if there are more than one panels like this then the code is not working. How can I solve that issue aswell?
You are using Id for selector $("#cancel_edits") .
Id selectors returns only first element , so if there are multiple pannel it will work only for first.
Instead give some class name and use it for selector. Further you can use chaining and caching in your code for better performance.
$(".cancel_edits").on('click', function () {
var elm=$(this);
elm.add(elm.siblings("button,textarea")).hide();
elm.siblings("p.content").show();
});
I would recommend referencing your elements by ID:
$("#cancel_edits").on('click', function () {
$('#save_edits').hide();
$('#edited_content').hide();
$(this).hide();
$("p.content").show();
});
JSFiddle
The great thing about using IDs is that you are guaranteed they are unique - no need to use closest() to find the element you want. If, however, you're using classes instead, closest() might be necessary or helpful.
This question already has answers here:
Why isn't my JavaScript working in JSFiddle?
(7 answers)
Closed 9 years ago.
I have some simple code for one of my first jquery scripts, I'm trying to call it's function but it keeps saying the function doesn't exist! I have check the spelling and I'm sure I had this working before but I have no idea what's changed.
This is my code: http://jsfiddle.net/spadez/6LLpC/
This is how I'm calling my function:
jQuery(function($){
applyField();
});
Can anyone show me where I went wrong please?
applyField isn't defined because jsFiddle wraps your code in an onload event handler. So the function is only visible in this event handler.
Choose "no wrap - in <head>" in the left menu :
Alternatively, you could also call your function from this event handler, this would be more coherent.
Note that calling the function isn't enough. If you want your event binding to be effective, change
$(this).on('change', '#apply',function() {
to
$(document.body).on('change', '#apply',function() {
Demonstration
After fixing the onload issue, your second problem is this is not a parent of the <select> element, in your function. In order to use that style of .on you need to pass in a parent of the element you're targeting (which can be document).
Change from:
$(this).on('change', '#apply',function() {
To:
$(document).on('change', '#apply',function() {
Also, to prevent hiding all inputs, I suggest using a class instead of selecting $('input'). See fiddle.
Updated fiddle
Approach - 1 => Click here for Demo
JQuery
$(document).ready(function(){
applyField();
});
// Apply Fields
function applyField() {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
};
Approach - 2=> Click here for Demo
JQuery
on needed to execute the function after the DOM is ready.. Check demo.
$(document).ready(function () {
$(this).on('change', '#apply',function() {
var selected = $(this).find(':selected').val(),
elem = $("#"+selected);
$("input").addClass('hidden');
elem.removeClass('hidden');
$(".donthide").show();
});
$("#apply").trigger('change');
});
I need to make a div so that when the cursor hovers over it then I can detect it (using javascript) but I want to make it so that you can click through the div to the elements underneath. Is there a way to do this?
Thanks
Edit
As far as I'm aware, and through my quick searches, I do not believe that you are able to do this, if you can it wouldn't be easy and or very practical I wouldn't think.
old
Using jQuery:
$(document).ready(function(){
$("body").on("hover", "div", function(){
//do whatever you want on hover
});
$("body").on("click", "div .child-class", function(){
//do whatever on click
});
});
If this doesn't answer your question and do what you want, let me know what more specifically why it doesn't.
There are multiple solutions for this depending on your problem.
I will start with some assumptions:
1. You are the owner of the page (you know what happens there);
2. You know what element is beneath the clicked element.
For this case check this code:
//function executed when you click on element with id: beneath
function clickOnBeneath() {
alert("beneath click");
}
//function executed when you click on element with id: above
function clickOnAbove() {
var beneathEl;
beneathEl = document.getElementById("beneath");
beneathEl.click();
}
//attach click event on element with id: above and beneath
function attachClickOnElements() {
var aboveEl,
beneathEl;
aboveEl = document.getElementById("above");
aboveEl.addEventListener("click", clickOnAbove, false);
beneathEl = document.getElementById("beneath");
beneathEl.addEventListener("click", clickOnBeneath, false);
}
attachClickOnElements();
and also working example: http://jsfiddle.net/darkyndy/xRupb/
If you don't know what element is beneath it then I will try to find some code as I wrote a couple of years back something like this, as start point you can check getClientRects() function that is available on HTML elements (documentation: https://developer.mozilla.org/en-US/docs/DOM/element.getClientRects )
How would I slideUp() the content only when '.areaCodeList' is clicked a second time?
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideDown();
($this.die());
$('.churchList').slideUp();
});
You should use slideToggle()
$(".areaCodeList").on('click', function() {
$(this).next('.churchList').slideToggle();
});
Example
You may use some class to indicate it already clicked before running the code
$(".areaCodeList").on('click', function() {
if (!$(this).is('.clicked')){
$(this).addClass('clicked');
return false;
}
$(this).next('.churchList').slideDown();
$(this).die();
$('.churchList').slideUp();
});
You also may consider using attributes ($(el).attr('clicked')) instead of class and check for it later in a similar way.
Update:
The question title is really confusing and it seems that only many of us (answering the question) don't got it from the start:
Initially I got it like this:
Slide the element up if it clicked for the second time.
If it's the case than the sample I've provided is correct.
But it looks like the question is more like this:
Slide the element down on every even click and slide it up on every odd click.
If this is the case that slideToggle is the solution (as explained in epascarello's answer)
You can check if the .churchList is visible (slided down):
$(".areaCodeList").on('click', function() {
if( $(this).next('.churchList').is(':visible') === true){
$(this).next('.churchList').slideUp();
}else{
$(this).next('.churchList').slideDown();
}
});