I have a news page which (for the sake of length) uses a Show/Hide script for long contents.
Thing is that the script is applied globally to all the contents and I would like it to be applied to only one element or to the nearest element.
Script:
$(document).ready(function(){
$(".btn1").click(function(){
$("p.esl").hide();
});
$(".btn2").click(function(){
$("p.esl").show();
});
});
Website: http://thc-racing.com/
P.S. I'm new to jQuery so my skill are very limited.
This following code will fix your problem.
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
this code will not hide all the p tags which only hide belongs to news item
cheers
Use id not the class
$(document).ready(function(){
$("#btn1").click(function(){
$("p#esl1").hide();
});
$("#btn2").click(function(){
$("p#esl1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id = "esl1">Here is my paragraph!!!! Hi I can hide</p>
<p id = "esl2">Here is my paragraph!!!! Hi I won`t hide</p>
<button id = "btn1">hide</button>
<button id = "btn2">show</button>
May be this answer here, will help you understand more.
As #naveen said above is best way to deal with this kind of scenarios
$(document).ready(function(){
$(".btn1").click(function(){
$(this).parents(".news-item").find(".esl").hide();
});
$(".btn2").click(function(){
$(this).parents(".news-item").find("p.esl").show();
});
});
in this logic traversing to its part and finding its own child will solve event click problem.
Related
I have the following function:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("[href=#"+id+"]").addClass('colorAdded');
});
});
For some reason, the mouseenter function does not seem to be working. When the mouse scrolls over one of the sections (which have the section tag), the corresponding link (which have the a tag) in the top right corner should gain a green background color. However, it is unresponsive.
You just need to change your JS to:
$(document).ready(function(){
$('section').mouseenter(function(){
var id = $(this).attr('id');
$('a').removeClass('colorAdded');
$("a[href='#"+id+"']").addClass('colorAdded');
});
});
It was an issue with not including quotations in selecting the a tag with the href targeting.
I'm actually don't know why your codepen example is not working, I didn't look into your code carefully, but I tried to create simple code like bellow and it worked.
the thing you probably should care about is how you import JQuery into your page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
hopefully this following codes can help you.
$(document).ready(function(){
$('button').mouseenter( function() {
console.log('hahaha');
})
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="test">
<button class="test-button" > test button </button>
</div>
</body>
</html>
How to add text from span tag to data-attr?
Example:
I have this code
<div class="clearfix colelem" id="u92-5"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
And I want to add iconsymbol to data-attr="iconsymbol" of the same element like a:
<div class="clearfix colelem" id="u92-5" data-attr="iconsymbol"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
Yes and it will be with all elements which has a title="icon"
<script>
$( document ).ready(function() {
$("[title*='icon']").attr('data-attr',function(){
// I don't know
}).removeAttr('title');
});
</script>
Do you know how to do it?
So I know it is very simple but I am new in jquery and I need in your help.
I hope you understood my question.
Here is an example that should work for you. There is probably a few ways you can pull this off, but this should hopefully get you started. Please see the attached JSFiddle to see this example in action
$(function() {
$('[title*="icon"] span').each(function(){
$(this).parent().closest('div').attr('data-attr', $(this).text())
});
});
Here is another way you can do this as well
$('[title*="icon"]').each(function(){
$(this).attr('data-attr', $(this).children().closest('span').text());
});
JSFiddle Example
Your <div>s should have attribute title="icon"
You are using a callback to attr() function, so return the value which you need to set inside the function using .text().
$(document).ready(function () {
$("[title='icon']").attr('data-attr', function () {
return $(this).find('span').text();
}).removeAttr('title');
});
Demo
Returning to JavaScript after a long break and I can't get this to work. I must be doing thing really stupid because it works fine with an onclick('') attached to the button in the HTML file just not when I try and do it in the script.js
I've tried to include everything that should be needed but if i've missed something let me know.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script type="text/javascript" src="script.js"></script>
<div class="application">
<button type="button" class="solution" id="webSolution">
<p>
Website Solutions
</p>
</button>
<button type="button" class="solution" id="mobileSolution">
<p>
Mobile Solutions
</p>
</button>
</div>
<div class="mobileSolutionDetails">
<h3>
Mobile Solution
</h3>
price details
</div>
<div class="webSolutionDetails">
<h3>
Website Solution
</h3>
price details
</div>
and my javascript
$(document).ready(function() {
$('#webSolution').onclick(function() {
alert('webSolution');
$('.webSolutionDetails').style.display = 'block';
$('.mobileSolutionDetails').style.display = 'none';
});
$('#mobileSolution').onclick(function() {
alert('Hey!');
$('.mobileSolutionDetails').style.display = 'block';
$('.webSolutionDetails').style.display = 'none';
});
});
Any help would be great
It doesnt like onclick for one. Changed to:
.on("click", function(){});
instead of
.onclick(function(){})
if you wanted to do it your way, you would want to do
.click(function(){});
on a similar note, your CSS tags are wrong for jquery.
use:
$(item).css({display:"block"}); //instead
Here is a fiddle. http://jsfiddle.net/qMsm2/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Your script must come after jquery.min.js, otherwise $ won't be defined when you try to use it. You're also missing the end > in the jQuery script tag.
jquery uses "click" as function.
http://api.jquery.com/click/
You should use it like this:
$('#webSolution').click(function() {
});
Check this fiddle: http://jsfiddle.net/4CNML/
Two ways for you to write it.
With .on (this is becoming the most favored way it seems)
$('#mobileSolution').on('click', function() {
alert('Hey!');
$('.mobileSolutionDetails')..css({display: 'block'});
$('.webSolutionDetails').css({display: 'none'});
});
or with .click
$('#mobileSolution').click(function() {
alert('Hey!');
$('.mobileSolutionDetails').css({display: 'none'});
$('.webSolutionDetails').css({display: 'none'});
});
Also, since your using jQuery the .style is invalid. Use .css like I did above.
<div class="show_hide panel-header" rel="#panel">
<h4>Disclaimer</h4>
</div>
<div id="panel" class="panel">
<p>Lorem ipsum</p>
</div>
Above is my HTML ... a simple div for the header (event handler) and the hidden div to show/hide. Works perfectly for a simple show/hide, but I may have several panels on screen at once and I don't want to explicitly ID each one and give it it's own function. How can I use the this selector to achieve dynamic interactions?
My JQuery currently:
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$(".show_hide").show(); //Probably don't need this line...
$('.show_hide').click(function(){
$(this).children("div").slideToggle();
});
});
</script>
Any help is appreciated. I'm new to JS/JQuery and having some trouble understanding the different selectors. Thanks!
Your div isn't a child, it's the next div in line:
$(this).next("div.panel").slideToggle();
you can try this
<script type="text/javascript">
$(document).ready(function(){
$(".panel").hide();
$('.show_hide').click(function(){
$(this).next(".panel").slideToggle();
});
});
</script>
I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link
As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});
the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}
It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>
You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/
you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these