So, I have a simple code that I can't get it to work. I tried to find answers on the same topic here, but being new to jQuery all answers seem too complicated.
Anyways, what I want to do is have the same script run for different divs. After some reading here I managed to arrange the following code, but it doesn't seem to work.
<div id="mydiv1" onclick="handleClick(this)" style="position:relative; left:0px;">Div One</div>
<div id="mydiv1a" style="position:relative; left:0px;">Div One A</div>
<div id="mydiv2" onclick="handleClick(this)" style="position:relative; left:0px;">Div Two</div>
<div id="mydiv2a" style="position:relative; left:0px;">Div Two A</div>
<script>
$(document).ready(function(){
function handleClick(x) {
$(x.id + 'a').fadeToggle("slow");
}
}
</script>
What I want this to do is when I click #mydiv1, the function should run on #mydiv1a. And the same for #mydiv2. Thank you in advance for your help!
It's better to assign the handling within your script (not inline in html). Bonus for that is that you can use jQuery delegation, i.e. assign a click handler on the document body for a number of elements within the body. Furthermore, the styling should be in a css tag/css file where possible (why?). In this case both position and left are useless. The snippet shows all this:
$('body').on('click', '#mydiv1, #mydiv2', handleClick);
// ^ handler on body | |
// for elements |
// handler method
function handleClick(e) {
$('#'+this.id+'a').fadeToggle('slow');
}
#mydiv1, #mydiv2 {
cursor: pointer;
}
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="mydiv1">Div One</div>
<div id="mydiv1a">Div One A</div>
<div id="mydiv2">Div Two</div>
<div id="mydiv2a">Div Two A</div>
You need to use # which is how you select element with a specific id in jQuery or css for that matter
$('#' + x.id + 'a').fadeToggle("slow");
But you can simplify your code to the below
$('div').filter(function(){ return /\d+$/.test(this.id) }).click(function(){
$(this).next().fadeToggle("slow");
});
Try this
$(this).next().fadeToggle("slow");
This code creates a click event for both divs. The event will be aware of the specific div clicked.
$(function(){
$("#mydiv1, #mydiv2").click(function(){
$(this).fadeToggle("slow");
});
});
Related
HTML:
<div class="channellist"></div>
Using Ajax i am getting the channels dynamically when the page loads and appending in the channellist container. After appending my html looks like this.
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
I tried like this
$('.channellist').hover(function() {
alert(this.id);
});
I got the alert message.
when i tried the hover on c01 class i didnt got the alert.
$('.c01').hover(function() {
alert(this.id);
});
I dont know where it is going wrong. Can anyone help to figure it out.
You need use event delegation, try this
$('.channellist').on('mouseenter mouseleave', '.c01', function() {
console.log(this.id);
});
// only for example
setTimeout(function () {
$('.channellist').html(
'<div class="c01" id="c1">1</div>' +
'<div class="c01" id="c2">2</div>' +
'<div class="c01" id="c3">3</div>'
);
}, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="channellist" id="channellist"></div>
$.on
The name "hover" used as a shorthand for the string "mouseenter
mouseleave". It attaches a single event handler for those two events,
and the handler must examine event.type to determine whether the event
is mouseenter or mouseleave. Do not confuse the "hover"
pseudo-event-name with the .hover() method, which accepts one or two
functions.
Using Ajax i am getting the channels dynamically
This can be sorted using event delegation like:
$('#channellist').on('mouseenter', '.c01', function() {
alert(this.id);
});
syntax of event delegation is something like:
$(staticParent).on(event, selector, callback);
where $(staticParent) should be the element which was available when DOM was ready, In your case it seems to be #channellist element.
Since code is dynamically attached to the div, onload of the document the event will not be present, So use .live event or use .on by delegating the event. Then event will execute. For your reference Check this link:
https://jsfiddle.net/HimeshS/ocxoy6c2/
https://jsfiddle.net/HimeshS/ocxoy6c2/
For .live:
$(.c01).live("mouseenter", function(){
alert(this.id);
});
<div class="channellist" id="channellist">
<div class="c01" id="c1"></div>
<div class="c01" id="c2"></div>
<div class="c01" id="c3"></div>
</div>
Your blocks are empty, their height is 0, and you can't hover on tham.
Try to make height more, or print some text inside,
Like:
<div class="channellist" id="channellist">
<div class="c01" id="c1">1</div>
<div class="c01" id="c2">2</div>
<div class="c01" id="c3">3</div>
</div>
How to close alert message parent div using javascript?
Problem is parent div is closing but i need to close above parent div.
Here is my code:
$(".msg-error .btn-close").click(function(){$(this).parent().hide();});
.msg-error {
background:#ff0000;
color:#fff;
padding:10px;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="mainalert">
<div class="msg-error">
<div class"container">
First error message <a class="btn-close">Close</a>
</div>
</div>
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close">Close</a>
</div>
</div>
</div>
You can use .closest() to specify the closest parent you want to achieve by using a selector.
$(".msg-error .btn-close").click(function() {
$(this).closest('.msg-error').hide();
});
With this function you can even change your HTML structure without having to edit your JavaScript code to deal with multiple level of .parent() calls, provided that you continue using the same CSS class for the selector.
FIDDLE: http://jsfiddle.net/8b7zt1g7/5/
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
http://jsfiddle.net/8b7zt1g7/4/
Or, little fancier:
$(".msg-error .btn-close").click(function(){$(this).closest('.msg-error').hide();});
You can chain .parent() calls together. Try:
$(".msg-error .btn-close").click(function(){$(this).parent().parent().hide();});
you can try this way, by searching for that main parent div
you can use closest() or parents(), first option will return first match and seconds will return all matches, your choice
$(".msg-error .btn-close").click(function() {
$(this).parents(".msg-error").hide();
});
or going the parent twice
$(".msg-error .btn-close").click(function() {
$(this).parent().parent().hide();
});
Remove parent div without jquery
<div class="msg-error">
<div class"container">
Second error message <a class="btn-close" onclick='Close()'>Close</a>
</div>
</div>
<script>
function Close(){
document.getElementsByClassName('msg-error').innerHtml='';
}
<script>
I have a problem here HERE. I don't know why it doesn't work.
Let's look the following code to understand it better.
HTML
<div class="click">List 1</div>
<div class="information">Info 1</div>
<div class="click">List 2</div>
<div class="information">Info 2</div>
CSS
.information {
display:none;
}
JS
$('.click').click(function() {
$('.information').slideToggle('slow');
});
I tried one by one it doesn't work at all. Can you help me fix it?
Thanks
Your code does exactly what it should - it runs slideToggle on all .information tags.
If you just want the one right after the clicked item, you can do:
$(this).next('.information').slideToggle('slow');
Your selector inside the click callback must be specific to the element that was clicked.
$('.click').click(function() {
$(this).next('.information').slideToggle('slow');
});
WORKING JS FIDDLE DEMO
This is my JavaScript code:
Javascript
<script> $(document).ready(function(){
$("#showButton").click(function(){ $("#showContent").toggle("slow");
}); }); </script>
The question is how I can use same code for different <div>
Like using this code to open <div id=#showContent></div> and using same code but separately open <div id=#showContentSecond></div>
I have a lot of div elements and I don't want to code something everytime I want to manipulate an element.
The button will need to be related to the div in some way, if it isn't a child of the div, example:
<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>
<div data-something="1">first</div>
<div data-something="2">second</div>
Javascript:
$(document).ready(function(){
$('button.mybutton').click(function(){
$('div[data-something=' + $(this).data('something') + ']').toggle();
});
});
Fiddle demo: http://jsfiddle.net/vcAtb/
You can use the document.getElementsByTagName element to get all divs.
document.getElementsByTagName("div")
Apply a CSS class to each element you want to have the same behavior
HTML
<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>
JavaScript
$(document).ready(function(){
$(".toggleDiv").click(function()
{
$(this).toggle("slow");
});
});
http://jsfiddle.net/gDG6n/
I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks
You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted
I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)