I'm trying to hide/show sections of a page using the following script:
$(function () {
$('.open').on('click', function () {
var contentType = $(this).attr('id');
if (contentType == "all") {
$('.content-div').show();
} else if (contentType == "train" || "manual") {
$('.content-div.' + contentType).show();
$('.content-div:visible:not(.' + contentType + ')').hide();
} else if (contentType == "close") {
$('.content-div').hide();
} else {
$('.content-div.' + contentType).toggle();
}
});
});
A jsfiddle example is here with html
The issue is with the final line in the else part - this works correctly (show/hide the relevant div(s) with the associated class) when outside the if-else statement but doesn't work in the else section - the div appears the first time a numbered button is clicked, but doesn't disappear on reclicking.
What am I doing wrong? Many thanks.
Replace:
} else if (contentType == "train" || "manual") {
with:
} else if (contentType == "train" || contentType == "manual") {
"manual" is always evaluated as true therefore this whole else-if branch is evaluated as true. See MDN for more details.
Related
I'm building a wordpress theme and I'm developing a sidebar which stays fixed during scrolling and goes up when you reach the comments. Here's a part of my jQuery code:
jQuery(window).bind('scroll', function () {
var flag = '';
if (calcTop() === true && calcBottom() === false && flag !== 'false')
{
jQuery('#aside-sidebar').css({'position': 'fixed', "top": "59px"});
}
else if (calcTop() === false && calcBottom() === false && flag !== 'false')
{
jQuery('#aside-sidebar').css({'position': 'absolute', "top": ""});
}
else
{
flag = 'false';
jQuery('#aside-sidebar').css({'position': 'absolute', "top": sidebarPosition()+"px"});
console.log(flag);
}
});
The issue I have is that the flag variable is not changing according to the last part of the if statement. Any hint?
in the else part if you are setting flag to 'false' it will definitely be set as u expected.
In your condition part i think you can add some refactoring as in if and else if part you are having two similar conditions .
and why are you setting flag to a string variable instead you can easily use boolean flag here.
last but not the least you can watch the console for any error. if any error occurs that means it is not coming to the setter part flag = 'false';
In this script below, I set an element to visible or hidden as you'll can see. However, once .closeAdd is shown it will not hide if the script comes to the second part in the if statement. I've noticed that jQuery sets it to display:block when it uses show(). Any idea how I can set this right?
if(type === 'user' && action === 'add') {
if($('.closeAdd').is(':hidden')) {
$('.closeAdd').show();
}
} else { //If it's visible and it comes to this part, it will not hide...
if($('.closeAdd').is(':visible')) {
$('.closeAdd').hide();
}
}
Since display is being updated you can check it in your function as it follows:
if(type === 'user' && action === 'add') {
if($('.closeAdd').css("display") == 'none') {
$('.closeAdd').show();
}
} else {
if($('.closeAdd').css("display") == 'block') {
$('.closeAdd').hide();
}
}
I am trying to wrap my head around if statements. I am new to this.
I have a pretty simple script pulling data(text) from a html5 data attribute.
var $datatext = $(this).data('explain');
Now I want an if statement when html5 attribute data-explain is missing or empty.
var $success = if ($datatext < 0) {
// show some other text, maybe? =
$(this).text('Fail');
} else {
// show original, maybe? =
$(this).text($datatext);
}
Again, hard time wrapping my head around it. Ohhh these ifs.
That should work:
if (typeof $datatext !== 'undefined' && $datatext.length > 0) {
$(this).text($datatext);
} else {
$(this).text('Fail');
}
check for the length not for the data in $datatext rewrite your code like this
if ($datatext.length > 0) {
// show original, maybe? =
$(this).text($datatext);
} else {
// show some other text, maybe? =
$(this).text('Fail');
}
You can do it this way,
Live Demo
$('.someclass').each(function() {
if(typeof this.attributes['data-explain'] != 'undefined')
{
alert(this.id + ": explain exists");
explain = $.trim(this.getAttribute('data-explain'))
if(explain.length > 0)
alert(explain);
else
alert("no value for explain");
}
else
alert(this.id + ": explain does not exists");
});
I want to check if my application's buttons are pressed or not. The error I face is, even when the buttons are clicked all the alerts display. Attached is the code snippet, the variables are set by click of buttons.
I want the alert not to display if any of the values are selected,
var condition ;
var clickable; // GLOBAL VARIABLES
function clickMe1()
{
clickable = "Sell";
}
function clickMe2()
{
clickable = "Rent";
}
function condition1()
{
condition="Excellent"
}
function condition2()
{
condition="Good"
}
function condition3()
{
condition="Fair"
}
function condition4()
{
condition="New"
}
function display()
{
if (condition != "Excellent"||"New"||"Fair"||"Good")
{
alert( " Please enter the condition ");
}
if (clickable != "Sell"||"Rent")
{
alert("Please enter the Sell");
}
if (costSell === '')
{
alert("Please select a Price ");
}
if ((condition === "Excellent"||"New"||"Fair"||"Good") && (clickable === "Selling"||"leasing")&&(!isNaN(costSell)))
{
// Do Something
},
error: function(data){
console.log("not added");
}
});
}
else
{
alert(" price is not a number");
}
}
I also tried:
if(condition !='Excellent'|| condition!='New' || condition!='Fair'|| condition!='Good')
{
alert( " Please enter the condition ");
}
if (clickable !='Sell'||'Rent' )
{
alert("Please enter the Sell ");
if(condition !='Excellent'|| condition!='New' || condition!='Fair'|| condition!='Good')
should be
if (condition != 'Excellent' && condition != 'New' && condition != 'Fair' && condition != 'Good')
because your version triggers if the condition is any one of Excellent, New, Fair, or Good. The corrected line triggers when the condition is not one of those.
And
if (clickable !='Sell'||'Rent' )
should be
if (clickable !='Sell' && clickable !='Rent' )
because you can't make that shortcut of only using clickable once.
condition !="Excellent"||"New"||"Fair"||"Good"
Conditions like this are your problem.
condition !="Excellent" && condition != "New" ...
^The solution
Your problem is you're testing multiple conditions without repeating the left-hand operand.
For example:
condition !="Excellent"||"New"||"Fair"||"Good"
It should be this:
condition != "Excellent" || condition != "New" || condition != "Fair" || condition !="Good"
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}