This is what should happen: When I click an image '.post-text' should appear, then - when I click the image once more - the image disappears. All this happens in the toggle function but I have simplified it here.
This is what actually happens: When I click one image, the '.post-text' of all the blocks are opened immediately. I need that to only open the one that I click. I have tried what you see below and the find function, but it doesn't work. Please help me.
$( ".down-text img" ).click(function() {
$(".post-text" ).toggle( "slow" );
});
You can use classes
but with that you will be needing some traversing
supposing your .post-text is the next div after your image
$( ".down-text img" ).click(function() {
$(this).next(".post-text" ).toggle( "slow" );
});
see jquery next() | find() | parent()
https://api.jquery.com/next/
https://api.jquery.com/parent/
https://api.jquery.com/find/
You should use $(this) to target the element you just clicked:
$( ".down-text img" ).click(function() {
$(this).find(".post-text" ).toggle( "slow" );
});
Data attributes can help here.
If you add a data attribute called text to your HTML image element:
<img data-text="text1"/>
And a matching one to your text element:
<div class="post-text" data-text="text1">Here is some text</div>
You can then use that information to only open the correct text element rather than all of the elements that share the same class:
$('.down-text img').click(function () {
var id = $(this).data('text');
$('.post-text[data-text="' + id + '"]').toggle("slow");
});
DEMO
Related
I have a file called main.html that contains several div's each with 2 classes:
1st is their specific class 2nd is a class called menu-item which I use to determine if an event will triggered when clicked.
The file contains this:
<div id="load-here">
</div>
<div class="item-1 menu-item">
click this
</div>
I also have a gallery.html file which I want to be loaded into the main.html file in the #load-here div, and let's say it contains this:
<div class="menu-item>
<!-- some image here -->
<img href="img/1.jpg />
</div>
The script I have is this:
$(document).ready(function() {
$( "div" ).click(function() {
if ( $( this ).hasClass( "menu-item" ) ) {
$("#load-here").load("gallery.html" + this.class);
}
});
});
The problem: It's not working. I've tried various changes. Somehow it's not loading into the #load-here div
Take a look at this: http://api.jquery.com/load/
$( "#b" ).load( "article.html #target" );
There seem to several issues:
By this: $( "div" ).click(function() ... you are registering the click on all divs available. This might cause strange behaviour. Better use: $("div.menu-item").click( ...
Make sure you understand the context and the event target in your callback function. Sometimes this is cheating you, as the context of the call may be different. Things are more clear if you handle the event as explicit parameter and check the event target.
I guess you would like to give a parameter for your gallery.html, but as #charlietfl mentions, there is no .class. But, in the DOM there is a .className. Better try to use the jQuery $().attr('class'). Also, the parameter needs a separator: gallery.html?parameter
To sum it up, here my suggestion:
$("div.menu-item").click( function(event) {
var jqTarget = $(event.target).closest('.menu-item');
if ( jqTarget.hasClass( "menu-item" ) ) {
$("#load-here").load("gallery.html" + "?" + this.class);
}
});
closest() will attempt to find the closest matching element, in case the click target was not on the div itself, but rather a child img or else. So, the condition in the suggestion should be used to find out about more specific about which menu item was clicked: if ( jqTarget.hasClass( "that-specific-item" ) ...
I'm dynamically getting hyperlinks and paragraphs from the database, and I wish to hide/show the paragraphs. How can I use jquery to show/hide only a hidden paragraph of a particular link, instead of showing all the paragraphs?
<body>
first link
<p>Show this when I click first link</p>
second link
<p>Show this when I click second link</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
</script>
</body>
Change:
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
to:
$( "a" ).click(function( event ) {
event.preventDefault();
$(this).next().show();
});
jsFiddle example
Note, you could also toggle between show/hide by using .toggle() instead of .show() if you like.
The most easy way is to give each paragraph a unique id and store that in the link as well. Like this (fiddle here)
html
first link
<p id="p-1">Show this when I click first link</p>
second link
<p id="p-2">Show this when I click second link</p>
javascript
$('a').on('click', function(e) {
e.preventDefault();
$('#'+$(this).attr('rel')).slideToggle();
});
Other options may be, for example, to find the first child of a certain type (eg a p, or a p with a specific class). Whatever way finding the element you want suits you. What is most appropriate for you mostly depends on how your page is structured.
So I have the code for the the div. All I need is for the div to fade out and then have the parent child removed after fade.
JSFiddle Link
HTML
<div onclick="fadeOut(this)" id="fadeOut">
<div id="divText">
This is a simple div with some text in it. This is another line of text.
All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest!
</div>
</div>
The CSS is located in the JSFiddle link.
I know solution for this at jQuery
$("#fadeout").ckick(function(){
$(this).find("div").fadeOut().parent().remove();
});
You indicate jQuery via the tags, so here is a jQuery solution. It passes a callback function to the fadeOut function which removes the #divText.
function fadeOut(i) {
$(i).fadeOut(3000, function(){
$("#divText").remove();
});
}
One improvement I would recommend is to attach the event handler via javascript instead of inline.
Javascript
$("#fadeOut").click(function(){
$(this).fadeOut(3000, function(){
$("#divText").remove();
});
});
HTML
<div id="fadeOut">
<!--Content Here -->
</div>
JS Fiddle: http://jsfiddle.net/ZGp62/1/
You can easily do this with the fadeOut jquery function.
Example:
$( "#buttonID" ).click(function() {
$( "#thedivID" ).fadeOut( "slow", function() {
//this removes the div from the DOM
$( "#thedivID" ).remove();
});
});
See more examples and documentation here: http://api.jquery.com/fadeOut/
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.