When a user clicks on a certain icon, I want to hide/show relevant divs that are appropriate upon that action.
This is the JQuery I use:
$('.aTask').on('click','.descHide',function(){
$(this).closest('.taskDesc').hide();
$(this).closest('.descShow').show();
$(this).closest('.descHide').hide();
});
$('aTask').on('click','.descShow',function(){
$(this).closest('.taskDesc').show();
$(this).closest('.descShow').hide();
$(this).closest('.descHide').show();
});
$('#showTasks').on('click','.delete',function(){
$(this).closest('.aTask').remove();
});
But the intended actions do not happen as can be shown in this JSFIddle. Where I would click on the minus sign a plus sign should appear and the text below should either disappear or appear.
Use .parent().find(...) instead of .closest(...). Also, ids must be unique.
Fiddle
$('.aTask').on('click', '.descHide', function () {
$(this).parent().find('.taskDesc').hide();
$(this).parent().find('.descShow').show();
$(this).parent().find('.descHide').hide();
});
// you had a typo here $('aTask')
$('.aTask').on('click', '.descShow', function () {
$(this).parent().find('.taskDesc').show();
$(this).parent().find('.descShow').hide();
$(this).parent().find('.descHide').show();
});
$('#showTasks').on('click', '.delete', function () {
$(this).closest('.aTask').remove();
});
Related
So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery
I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.
I have multiple div with same class.
When a user taps on one div i have a slidetoggle() in that i have two buttons "accept" and "reject". Now when the user clicks on the accept or rejects i want that specific div to change colour to green or red based on accept or reject.
But when i try to assign the colour all the div change colour.
Is there anyway to change the colour of the specific div.
$(document).on("pagecreate","#one1",function(){
$("div.comp2").on("tap",function(){
$("#panel").slideToggle("slow", function(){
$("#accept").on("click",function(){
$("div.comp2").css("background-color","#22bb45");
});
});
});
});
Within the event handler you can use the this keyword to refer only to the element which raised the event, instead of selecting all of the elements by class. Try this:
$(document).on("pagecreate","#one1",function(){
$("div.comp2").on("tap", function() {
var $comp2 = $(this);
$("#panel").slideToggle("slow", function(){
$("#accept").on("click", function(){
$comp2.css("background-color","#22bb45");
});
});
});
});
$(document).on("pagecreate","#one1",function(){
$("div.comp2").on("tap",function(){
var __this = this;
$("#panel").slideToggle("slow", function(){
$("#accept").on("click",function(){
$(__this).css("background-color","#22bb45");
});
});
});
});
Div with class ="front" is clone more than once on a html page ,button nested (class=poperbtn) clone as well, the button use is to open dialog-box/pop up (class="poper"), for example : if I have 4 divs -> class=front which means 4 buttons -> class="poperbtn", everytime I click on one of these buttons the dialog-box must pop-up, how to do this? is it possible? here is a code example.
//Dialog - box open button
<div class="front">
<input type="button" class="poperbtn" value="push it!" /> </div>
// Div for Dialog box
<div id="poper"> <h1>here I am </h1></div>
//To avoid using id I select button (id=poperbtn) this way - works fine I got id="poperbtn" button .
var _btnToDialog = "";
$(".front").live("click", function () {
_btnToDialog = $(this).next().children().eq(0);
});
//Dialog box Jquery function - I am not sure about this code.. got stuck here..
$(function () {
$("#poper").dialog({
autoOpen: false,
width: 650,
height: 600,
});
$(_btnToDialog).click(function () {
$("#poper").dialog("open");
});
});
});
**According to comments,I changed the button - has no Id only class.
You can hang click handler for all input inside .front elements.
Due to dynamically created elements it should be, for example
$(document).on("click", "selector", function() {})
instead of
$("selector").click(function() {})
So finally code will look like:
$(document).on("click", ".front input", function() {
$("#poper").dialog("open");
});
You can add class (for example, .button) for required inputs. Then code can be simplified to:
$(document).on("click", ".button", function() {
$("#poper").dialog("open");
});
Update. With inputs class .poperbtn it will be
$(document).on("click", ".poperbtn", function() {
$("#poper").dialog("open");
});
You can also have a look at this JSBin solution. There are many ways you can approach this problem it depends on what the desired behavior is you want to provide and the way you have already things in your codebase.
I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});
i would try using:
$('.submenu').css({display:"none"});
instead of .hide();
Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});
I have a requirement where I print all the email addresses in <input type="text" value="emailaddress"> on the jsp page. I should be able to edit the field, so I have a button at the end of it. But the email addresses can be of any number. How to select the button ending with any number
$('#button_1').on("click", function() {
//enter code here
});
$('#button_2').on("click", function() {
//enter code here
});
I am trying to do something like
$('#button_'[]).on("click", function() {
});
Can someone help me with this solution?
CSS wildcard:
$("button[id^='button_']").click(function() {
// button elements with id starting with "button_"
// return($(this).attr('id'));
});
$("button[id*='button_']").click(function() {
// button elements with id containing "button_"
// return($(this).attr('id'));
});
There is a starts-with attribute selector.
You can do the following:
$('[id^="button_"]').on('click', function () {
// your code here
});
The $('[id^="button_"]') selects all the elements that have an id beginning with button_. Then you are able to bind a single handler to cater for all button events.
Also instead of giving an Id you can put a class on these buttons since class can be duplicated:
<button class='email' id="#button_1"/>
<button class='email' id="#button_2"/>
Then its easier to select only these:
$('.email').on("click", function() {
// get access to the current button via this:
$(this).attr("value","delete");
});