jQuery show and hide events issue - javascript

I have some html elements with following structure.
<input class="test" />
<div class="test"></div>
<input class="test" />
<div class="test"></div>
<input class="test" />
<div class="test"></div>
<input class="test" />
<div class="test"></div>
Clicking on any input should .show its adjacent <div>
But it does trigger all divs
I want to make it that when I click on any Input field, only its adjacent <div> will be set to show and all others hide.
The jQuery code that I have so far is as follows:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('body').on('click', '.test', function () {
$(this).fadeIn('medium').siblings("div").hide();
});
});
</script>

The issue is that the call to .siblings('div') will apply to EVERY div since every element in your supplied HTML is on the same level.
If you don't want to change this structure, use .next()
For example:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('body').on('click', '.test', function () {
$(this).fadeIn('medium').next("div").hide();
});
});
</script>

.siblings() affect every div under the input box in the context so use .next() in jquery
$('body').on('click', '.test', function () {
$("div.test").hide();
$(this).fadeIn('medium').next("div").show();
});
Fiddle

because you have all div with same class "test", sibiling is affecting all of this divs with class "test"
$('body').on('click', '.test', function () {
$("div.test").hide();
$(this).fadeIn('medium').next("div").show();
});
http://jsfiddle.net/rwjzfhLy/

Related

JavaScript loop over clickable elements on click event, and skip the specific clicked element

<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
Upon clicking one of the 'clickable' elements i want to add a new class to all elements with 'clickable' class except the one that has been clicked.
$('.clickable').on('click', function (e) {
$('.clickable').each(function () {
$(this).addClass('new-class')
});
})
How, inside the loop, can i skip the specific element that was clicked?
$('.clickable').on('click', function() {
$(this).removeClass('new-class').siblings().addClass('new-class');
});
This is the simplest to control and read
You do not need the each
$('.clickable').on('click', function(e) {
$('.clickable').addClass('new-class');
$(this).removeClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
If they are surely all in the same container, you can use siblings.
To chain you MUST remove before adding
$('.clickable').on('click', function(e) {
$(this)
.removeClass('new-class') // still necessary for the second click of another element
.siblings().addClass('new-class');
})
.new-class {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="clickable">1</div>
<div class="clickable">2</div>
<div class="clickable">3</div>
<div class="clickable">4</div>
</div>
There is a not method in jQuery so the simplest thing you can do in my opinion is with the help of not method like below:
$('.clickable').on('click', function (e) {
$('.clickable').not(this).addClass('new-class');
})

Hide/show child element onClick

I am building a "edit profile" page.
Here is what I want to do:
In each section, the employer will be shown and the edit form will be hidden.
When I click the "edit employer" button, the edit form will be shown and the employer will be hidden.
Here is what I did using jQuery. It does not work when I click on the "edit employer" button. I do not know why this does not work.
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="edit">
<form class="editForm">
employer: <input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
$(this).children('.editButton').click(function() {
$(this).children('.editForm').show();
$(this).children('.contents').hide();
});
})
</script>
</body>
</html>
The $(this) inside the click function contains the local instance of the $(this).children('.editButton'). For that reason your code is not finding any .editForm elements.
For this to work you could do something like this:
<script>
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
})
$('div.edit').each(function() {
var $this = $(this);
$(this).children('.editButton').click(function() {
$this.children('.editForm').show();
$this.children('.contents').hide();
});
})
</script>
If I may I would improve the code with some more changes:
<script>
$('.edit .editForm').hide(); // this will hide all instances of .editForm
$('.edit .editButton').click(function() { //assign 1 handler for all cases
$(this).siblings('.editForm').show(); // show the sibling edit form
$(this).siblings('.contents').hide(); // hide the sibling contents element
});
</script>
Reference:
Sibling Selector: https://api.jquery.com/siblings/#siblings-selector
The problem is the this inside the click handler referring to the button, not the div.edit. Here's one way to fix this:
$('div.edit').each(function(i) {
$(this).children('.editForm').hide();
});
$('div.edit').each(function() {
var $self = $(this);
$(this).children('.editButton').click(function() {
$self.children('.editForm').show();
$self.children('.contents').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
<form class="editForm">
employer:
<input type="text" value="Citigroup" />
</form>
<div class="contents">Employer: Citigroup</div>
<button class="editButton">Edit Employer</button>
</div>
You don't need to use .each() at all. Just do an .click() event on the class of .editButton and use this to find its parent. If you want to make a toggle, you're going to have to make use of a new class or something of that nature to make a conditional statement off of.
//This will hide *ANY* .editForm elements
$('.editForm').hide();
//This will fire off of *ANY* editButton clicks.
$('.editButton').click(function() {
var form = $(this).closest('.edit'); //Get the wrapper
if(form.hasClass('open')) { //Check to see if it is open or not
form.removeClass('open').addClass('close'); //Toggle Classes
form.find('.editForm').show();
form.find('.contents').hide();
} else {
form.removeClass('close').addClass('open');
form.find('.editForm').hide();
form.find('.contents').show();
}
});
I like to use closest and find more than parent and children (respectively). They can go 1-many layers up or down and search the hierarchy for whatever you're looking for, rather than parent and children going up or down a single layer.
If you are inserting your .edit form after the DOM loads, you're going to need to bind your click event to the document
$(document).on('click', '.editButton', function() {
var form = $(this).closest('.edit');
form.find('.editForm').hide();
form.find('.contents').show();
});

jquery start from hidden

I have this script for my input button:
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('.menu-content').toggle('show');
});
});
});//]]>
</script>
I need to start from hidden. How I can do that? Please, help me.
Hide button by default with CSS rules:
.menu-content {
display: none;
}
If you want the element to be hidden from the beginning, you can use some CSS like this:
<div style="display: none;">...</div>
This will hide the div, without any flickering. Once you call .show() using jQuery, the div gets shown.
My friend solved my problem like this:
<div class="dupa" style="display: none"></div>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('.dupa').show();
});
});
</script>
JQuery:
jQuery('#hideshow').click(function(event) {
jQuery('.menu-content').toggle();
});`
HTML:
<div style="display:none" class="menu-content">
hi
</div>
<input id="hideshow" type="button" value="show/hide">
Fiddle: http://jsfiddle.net/42rwkhL0/
you need to set the display attribute to "none" in the style of your menu-content item(s)
as some before me have pointed - start with hidding the layer. then show it after the button is clicked. I have re-worked the code a bit:
$('#hideshow').bind('touchstart click', function () {
$('.menu-content').fadeIn(1000).css('display', 'inline');
});
http://jsfiddle.net/wktzv6hL/

Affect another element in current outer element

<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Blah</div>
</div>
<div class="test">
<button>Example</button>
<div class="example" style="display:none;">Another</div>
</div>
When button gets clicked, I want .example to .show, but only the .example that's in the current .test.
Another way that works for your particular HTML:
$('button').click(function(){
$(this).next('.example').show();
});
This will do exactly what you said:
$('button').click(function(){
$(this).closest('.test').find('.example').show();
});
This works too for the markup you posted, but it won't work if the button and .example are not siblings:
$('button').click(function(){
$(this).siblings('.example').show();
});
Hiya Working demo for your case here: http://jsfiddle.net/4bLZF/
this uses slideToggle http://api.jquery.com/slideToggle/
code
$(document).ready(function () {
// Watch for clicks on the "slide" link.
$('button').click(function () {
$(this).next(".example").slideToggle(400);
return false;
});
});​

Bind a jquery function to elements

I am very new to jquery and need some help. I am trying to change a css element when I enter a textbox. I have applied a css class to my textboxes and I have a couple of div tags around my textboxes.
When a user selects the textbox I want to change the desired div tag.
This is how the html looks
<div class="left">
<div class="right">
<input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
<span id="rfInput"></span>
</div>
</div>
my jquery looks like this
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$('.box.left').addClass("active");
}).blur(function () {
$('.box.left').removeClass("active");
});
});
</script>
Now the jquery is working and changes the class on focus and blur however it effects all elements witht he class="myTextBox" how can I get jquery to attach to all elements however only fire the css change to the selected textboxes outside elements class?
Any help would be great!
<script language="javascript" type="text/javascript">
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
})
.blur(function () {
$(this).closest('.left').removeClass("active");
});
});
</script>
this refers to the element that received the event.
So you wrap this into a jQuery object, $(this) and access the closest() ancestor with the class you designate.
.closest() - http://api.jquery.com/closest/
you were not that clear, so, here,s my guess...
$(function () {
$('.myTextBox').focus(function () {
$(this).closest('.left').addClass("active");
}).blur(function () {
$(this).closest('.left').removeClass("active");
});
});

Categories