Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
(Code below) Trying to get a hover effect on the text in a div. Using class selectors in JQuery and it's not hitting when I use $('.abc') but does work when I use $('#top-nav-1') - not sure why it can't be hit when I select it by the secondary class. I can go through and use all the ids, but I'd rather just use one class - after all, that's what they're for!
Thanks, in advance, for the input on this.
HTML:
<div id="top-nav-1" class-"container abc">The Text</div>
CSS:
.container {
color: black;
}
JQuery:
$('.abc').hover(function() {
$(this).css('color','red');
});
fiddle: http://jsfiddle.net/yB9Jq/
You have a typo: class=, not class- (= not -).
Also, jQuery's .hover() takes two functions as arguments:
.hover( handlerIn(eventObject), handlerOut(eventObject) )
So an example would be:
$('.abc').hover(
function() {
$(this).css('color','red');
},
function() {
$(this).css('color','');
}
);
Your fiddle, updated.
Your markup is incorrect. You need to have class="container abc" instead of class-"container abc"
<div id="top-nav-1" class="container abc">The Text</div>
http://jsfiddle.net/yB9Jq/1/
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have the following query selector but it does not work. Why?
document.querySelectorAll('div:not[style*="display: none;"]')
I got the following error is not a valid selector
It is working correctly without the :not but doesn't give me what I'm looking for.
so I guess I'm not using the :not correctly
You are forgetting the (), use like this :not([...])
let a = document.querySelectorAll('div:not([style*="display: none;"])')
console.log(a)
<div style="display: none;">a</div>
<div>a</div>
<div style="display: none;">a</div>
<div>a</div>
<div style="display: none;">a</div>
BUT, my suggestion is to use a class that hide the div and then use the query looking for that class... Because this selector: [style*="display: none;] is too fragile, it wont get elements that have, for example: style="display: none" (without ;) or style="display:none;" (without a space)
:not uses parentheses - it's kind of like a function. Try this:
document.querySelectorAll('div:not([style*="display: none;"])')
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have some background in computer programming, but I am just getting into Javascript and jQuery. I have this code that will delete the element's grandparent but the function isn't running at all ("I am not seeing the "alert".) Can you help me find out what is wrong?
NOTE: There are multiple .trashbuttons and I just want the .trashbutton being clicked's grandparent getting deleted.
$("trashbutton").click(function() {
this.parent().parent().remove();
})
EDIT: The answers I have been given are not working. I should also note that the .trashbutton is a img. If that helps.
You have an error in your selector, you forgot the . to select css classes.
And wrap this to $().
try
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
I suggests you to keep reading on jQuery and javascript, especially this documentation about jquery selector. Your script function properly, except that $("trashbutton") refer to a <trashbutton></trashbutton> tag, that doesnt exist in your code ( i guess ). If you wanted to target an element class with that use $(".trashbutton") or $("#trashbutton") to target an element with this ID :)
Use $(this)...this will represent DOM element but you need jQuery wrapped element.
Try this:
$(".trashbutton").click(function() {
$(this).parent().parent().remove();
})
Edit: As suggested in comments, make sure you have $("trashbutton") as valid selector..I assume you are dealing with classes hence it should be $(".trashbutton")
You should use #trashbutton if it is an id or .trashbutton if it is a class. Also wrap this as $(this).
$("#trashbutton").click(function() {
$(this).parent().parent().remove();
})
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to make the contactform originally hidden when the page is loaded, so contactform is to be hidden originally to do this in CSS i did:
#contactform{
display: none;
}
now in the HTML I have:
<div class="contactme" >Message me!</div>
and onclicking the message me it calls the function 'someFunc' the function hides the contactinfo but displays the contactform, the function is:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementsByID('contactform').style.display='block';
}
It hides the contactinfo perfectly as expected, however it doesn't show the contactform. I believe this could be because the CSS is overriding the function, is there any way to stop it from doing so and get it working as expected?
There is bad function name, correctly is small "d" and "Element" instead of "Elements"
document.getElementById('contactform').style.display='block';
^ ^
in your code document.getElementsByID is mention not document.getElementById USE THIS code:
function someFunc() {
document.getElementById('contactinfo').style.display='none';
document.getElementById('contactform').style.display='block';
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
Please, why this Jquery doesn't Working
$(function(){
$('.accContainer').hide();
$('.accordion:first').next().slideDown("");
$('.accordion').click(function(){
if( $(this).next().is(':hidden') ) {
$('.accordion').next().slideUp();
$(this).next().slideDown();
}
return false;
});
});
code : http://www.jsfiddle.net/BQYQ5/22
You aren't closing h2:
Change:
<h2 class="accordion">-... <h2>
To:
<h2 class="accordion">-... </h2>
See updated fiddle
A better option than the code you have may be instead to use toggle, as what you have now won't allow you to close a tab that is opened. It will also simplify your code quite a bit.
$('.accordion').click(function(){
$(this).next().toggle();
return false;
});
JSFiddle
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to do rich text editing with javascript and jquery.
I want to create a button to embolden selected text in a content editable div. When I tried with the following code, I get the expected result.
<div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div>
<button class='bold' onclick="document.execCommand('bold',false,true);">B</button>
However, when I used jquery to do the same thing, it was not working.
<div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div>
<button class='bold'>B</button>
$(function(){
$("button.class").on("click",function(){
document.execCommand('bold',false,true);
})
})
Why isn't jquery working for my problem ?
$("button.class").on("click",function(){
Change this to
$("button.bold").on("click",function(){
This is you can do and I hope this will definitely work.
$('.bold').click(function(){});