Condition does not work - javascript

Here is my code:
HTML:
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:
if($('#a:visible').length > 0) {
$('a').click(function() {
alert('a');
});
}
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/
If I click "hide aaa" and then I click on the link, alert is shown. I don't want to show the alert when #a is hidden. How can I change my code?


It's inside-out. You have to check visibility when the click happens.
$('a').click(function() {
if ($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function() {
$('#a').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">
aaa
</div>
<div id="b">
<button>hide aaa</button>
</div>
link
JS:


I got it working changing your condition to inside the click event, like so:
$('a').click(function() {
if($('#a:visible').length > 0) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});
http://jsfiddle.net/kgj4uw6f/2/


Here's another way of doing it! You can check the visibility of an element using $(element).is(":visible").
$('a').click(function() {
if($('#a').is(":visible")) {
alert('a');
}
});
$('button').click(function () {
$('#a').hide();
});

Related

how to hide/show tag a after click on it that is outside of a div which become hidden and shown

I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});

You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>

Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example

There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>

how to fadeIn the div element which has a display property value 'none' in CSS

$(document).ready(function(){
$('.quality-link').click(function () {
$('#aboutus').fadeOut('slow', function () {
$('#quality').css("display","block").hide().fadeIn('slow');
});
});
});
});

It should work fine.
Just check your code for syntax errors.
$('.quality-link').click(function() {
$('#aboutus').fadeOut('slow', function() {
$('#quality').fadeIn('slow');
});
});
$('#bring_back_about').click(function() {
$('#quality').fadeOut('slow', function() {
$('#aboutus').fadeIn('slow');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="quality-link">click me</button>
<button id="bring_back_about">bring back about</button>
<div id="quality" style="display: none;">
Quality div
</div>
<div id="aboutus">
About us
</div>

Function is not called on click of div class?

I am using jQuery 1.7.2. Originally, my HTML was rendered on page load:
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
Then I was registering below JavaScript function:
$(".my_div_class").on('click', function(event){ //function_1
}
It was working fine.
Because of some reason I need to change it to below
$(document).on('click','.my_div_class', function(event){}
Then its not working ? But If change above functiion to use my_button_class it works. Why it is not working with div ?

$(document).ready(function() {
$(document).on("click",".my_div_class",function(event) {
alert("Heyy! clicked me!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>

You can use $(event.target).closest(".my_div_class").length == 1 to see if you clicked on my_div_class or any element inside it.
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
demo
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
.my_div_class {
width:200px;
background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class">click
</button>
<div>

This is about jquery 'append', i want know why and how to solve it

first, there are codes I wrote.
<body>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
<script>
$(function(){
$('#btn').click(function(){
$('.popup').show();
$('#sure').on('click', function(){
var $box = "<div class='box'></div>";
$('.panel').append($box);
});
$('#cancel').on('click', function(){
$('.popup').hide();
});
});
})
</script>
</body>
then,there are steps i did.
the result
why i click the cancel button at first, and next time i click Sure button, there appears two DIVs actually.I just want one div.
How to solve this problem?

Do not add the event-handler as many times you click on #btn.
Bind click handlers for "sure" and "cancel" out of the click handler for "#btn"
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$('#sure').on('click', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$('#cancel').on('click', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>
If elements in the pop-up are created dynamically, Use Event delegation
$(function() {
$('#btn').click(function() {
$('.popup').show();
});
$(document).on('click', '#sure', function() {
var $box = "<div class='box'>Added</div>";
$('.panel').append($box);
});
$(document).on('click', '#cancel', function() {
$('.popup').hide();
});
})
.popup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
add
<div class="panel">
<div class="box"></div>
</div>
<div class="popup">
sure
cancel
</div>

Triggering a jquery function

How can I trigger the following function for a specific DIV
$(document).ready(function() {
if($('div.trigger').length > 0) {
$('div.trigger').click(function() {
if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).addClass('close');
$(this).next().slideDown(100);
return false;
} else {
$(this).removeClass('close');
$(this).addClass('open');
$(this).next().slideUp(100);
return false;
}
});
}
});
My html looks like this:
<div class="trigger open"><strong>Dropdown 1</strong></div>
<div class="cnt">
foo<br>
bar
</div>
<div class="trigger open"><strong>Dropdown 2</strong></div>
<div class="cnt">
baz<br>
boo
</div>
My solution was to this:
$(document).ready(function()
{
$('div.trigger:eq(<?=$_GET[exp];?>)').trigger('click');
});
Thanks for the help :)

$('div.trigger:eq(0)').trigger('click');//trigger click event of the Oth element
$('div.trigger:first').trigger('click');//trigger click event of first
$('div.trigger:last').trigger('click');//trigger the click of last one

Categories