jQuery(document).ready(function() {
jQuery( "li.post_link_history.current" ).click(function() {
jQuery( "div#rating-anchor" ).css( "display", "none !important" );
});
});
//or
jQuery(document).ready(function() {
if(jQuery('li.post_link_history.current').attr('class')=='current')
{
jQuery('div#rating-anchor').not(jQuery(this)).css('display','none !important');
}
});
How can I "By selecting a class, another div display none in jquery"?
Your display style value is not valid for inline styles
jQuery( "div#rating-anchor" ).css( "display", "none" );//or just call the hide() method
jQuery(document).ready(function() {
jQuery( "li.post_link_history" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or
jQuery( "li.current" ).click(function() {
jQuery( "div#rating-anchor" ).hide();
});
//or use an common class for "li" ex:"commonli"
jQuery( ".commonli" ).click(function() {
if(jQuery(this).hasClass("current")){
jQuery( "div#rating-anchor" ).hide();
}
});
});
.hide() method will hide the division.
edited... current and post_link_history are different classes..so use any one
Related
I want to execute the below code by creating a simple loop using jQuery, I can also change the classes if needed.
I want to shrink the code as much as possible.
$( ".btn1" ).click(function() {
$( this ).toggleClass( "act-btn1" );
});
$( ".btn2" ).click(function() {
$( this ).toggleClass( "act-btn2" );
});
$( ".btn3" ).click(function() {
$( this ).toggleClass( "act-btn3" );
});
$( ".btn4" ).click(function() {
$( this ).toggleClass( "act-btn4" );
});
$( ".btn5" ).click(function() {
$( this ).toggleClass( "act-btn5" );
});
$( ".btn6" ).click(function() {
$( this ).toggleClass( "act-btn6" );
});
$( ".btn7" ).click(function() {
$( this ).toggleClass( "act-btn7" );
});
$( ".btn8" ).click(function() {
$( this ).toggleClass( "act-btn8" );
});
$( ".btn9" ).click(function() {
$( this ).toggleClass( "act-btn9" );
});
$( ".btn10" ).click(function() {
$( this ).toggleClass( "act-btn10" );
});
$( ".btn11" ).click(function() {
$( this ).toggleClass( "act-btn11" );
});
$( ".btn12" ).click(function() {
$( this ).toggleClass( "act-btn12" );
});
for (let i = 0; i <= 12; i++) {
$( ".btn" + i ).click(function() {
$( this ).toggleClass( "act-btn" + i );
});
}
I don't know about your logic, And number of elements is dynamic or static. Anyway using simple loop like below may solve your problem.
for(let i = 1; i < 13; i++) {
$(`.btn${i}`).click(function() {
$(this).toggleClass(`act-btn${i}`);
});
}
The best way to do this would be to make a general class like .button and add it to every button, thun also make a general action class .btn-action, it would look somthing like this:
$('.button').on('click', function(){
$(this).toggleClass('btn-action');
})
Recently I got some HUGE help on here for a specific issue. I'm about 90% done with it.
I'm having an issue getting jQuery click functions to work on a mobile device.
What's strange, though, in the below code, that the top function (.cartholder > h3) works fine on a mobile device, but the rest of them do not.
(the .fa-shopping-cart is the mobile version of the .cartholder > h3, as it activates through an fa-icon--but it just doesn't work.)
//Dropdown cart in header
$('.cart-holder > h3').click(function(){
if($(this).hasClass('cart-opened')) {
$(this).removeClass('cart-opened').next().slideUp(300);
} else {
$(this).addClass('cart-opened').next().slideDown(300);
}
});
//Dropdown cart in header (mobile)
$('.fa-shopping-cart').click(function(){
if($(this).hasClass('cart-opened')) {
$(this).removeClass('cart-opened').next().slideUp(300);
} else {
$(this).addClass('cart-opened').next().slideDown(300);
}
});
//Popup rating content
$('.star-rating').each(function(){
rate_cont = $(this).attr('title');
$(this).append('<b class="rate_content">' + rate_cont + '</b>');
});
//Hamburger dropdown menu (mobile)
$( ".cross" ).hide();
$( ".hamburger" ).click(function() {
$( ".sf-menu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".sf-menu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
//Search header (mobile)
$( ".fa-search" ).click(function() {
$( "#search-mobile" ).slideToggle( "slow", function() {
});
});
The issue shouldn't be jQuery version or touchevents, because the .cartholder > h3 DOES work on mobile.
Eager to hear back from ya :)
i have this working code bellow and i think he is a little bit too long and redundant can i customize it ?
$( "#unique" ).click(function() {
if ( $( this ).is(':checked') ) {
$( ".lotud" ).show();
$( "#add_lot" ).hide();
$( "#lots_rows_contnr" ).hide();
$(".lotud input").prop({disabled: false})
$("#lots_rows_contnr input").prop({disabled: true})
}
else {
$( ".lotud" ).hide();
$( "#add_lot" ).show();
$( "#lots_rows_contnr" ).show();
$(".lotud input").prop({disabled: true})
$("#lots_rows_contnr input").prop({disabled: false})
}
});
You can shorten it slightly through the use of ternaries, using the checked property on the DOMElement itself, joining selectors and using the checked property as the basis for the disabled property. Try this:
$("#unique").click(function() {
$(".lotud").toggle(this.checked);
$("#add_lot, #lots_rows_contnr").toggle(!this.checked);
$(".lotud input").prop({ disabled: !this.checked });
$("#lots_rows_contnr input").prop({ disabled: this.checked });
});
Which of the two versions, your original or the above, is more readable is a matter of opinion.
There is something wrong with my jQuery script. It kinda works, but when I try to toggle between the classes it works at first.
the script changes classes just like it's supposed to. but when i try to do it again,
I have to click the link and then somewhere else, and then it works again.
I want to be able do repeat the whole procedure over and over without having to click two extra times.
var clickOnSettings = true;
$(".settings_link").click(function () {
event.preventDefault();
if (clickOnSettings) {
$("#coverup").toggleClass("cover1");
$("#settingani").toggleClass("settings1");
clickOnSettings = false;
}
});
$("#coverup").click(function () {
if (!clickOnSettings) {
$("#coverup").toggleClass("cover2");
$("#settingani").toggleClass("settings2");
clickOnSettings = true;
}
});
created a jsfiddle:
http://jsfiddle.net/5dzt1v6f/13/
If you toggle 'cover1', you basically toggle between having and not having 'cover1' on the element. That does not imply that you automatically get cover2 when you remove cover1.
You have to do that yourself. Fortunately, toggleClass has a second parameter that accepts a boolean. This allows you to easily toggle classes on or off based on your conveniently introduced boolean.
Furthermore, this makes the click handler for both elements the same:
var clickOnSettings = false;
$( ".settings_link, #coverup" ).click(function() {
event.preventDefault();
clickOnSettings = ! clickOnSettings;
//Toggle all classes.
$( "#coverup" ).toggleClass( "cover1", clickOnSettings);
$( "#settingani" ).toggleClass( "settings1", clickOnSettings);
$( "#coverup" ).toggleClass( "cover2", !clickOnSettings);
$( "#settingani" ).toggleClass( "settings2", !clickOnSettings);
});
http://jsfiddle.net/5dzt1v6f/20/
Why don't you just use addClass and removeClass for what you want to do.
var clickOnSettings = true;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings) {
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
clickOnSettings = false;
}
});
$( "#coverup" ).click(function() {
if (!clickOnSettings) {
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
clickOnSettings = true;
}
});
http://jsfiddle.net/5dzt1v6f/15/
I fixed it!
Not the prettiest code. But this worked I needed to have another class for the settingani and not for the coverup. So I had to do it like this:
var clickOnSettings = 1;
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 1) {
$( "#settingani" ).removeClass( "settings0" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( ".settings_link" ).click(function() {
event.preventDefault();
if (clickOnSettings == 2) {
$( "#coverup" ).removeClass( "cover2" );
$( "#settingani" ).removeClass( "settings2" );
$( "#coverup" ).addClass( "cover1" );
$( "#settingani" ).addClass( "settings1" );
clickOnSettings = 3;
}
});
$( "#coverup" ).click(function() {
if (clickOnSettings == 3) {
$( "#coverup" ).removeClass( "cover1" );
$( "#settingani" ).removeClass( "settings1" );
$( "#coverup" ).addClass( "cover2" );
$( "#settingani" ).addClass( "settings2" );
clickOnSettings = 2;
}
});
Thanks for all the help! =)
I have a interactive image that works perfectly fine in all other browsers than Internet Explorer, but I need it to work there as well...
How can I make this javascript code support newer and older IE browsers?
$(document).on('click', function(e) {
hideDiv(e);
});
$( document ).ready(function( ) {
$( "#ab-1" ).click(function() {
$( "#a-1" ).show( "fade" );
});
$( "#ab-2" ).click(function() {
$( "#a-2" ).show( "fade" );
});
$( "#ab-3" ).click(function() {
$( "#a-3" ).show( "fade" );
});
});
function hideDiv(e) {
if (!$(e.target).is('.ansatt') && !$(e.target).parents().is('.ansatt')) {
$('.ansatt').hide( );
$('.ansatt-info').show () ;
}
}
$(document).on('click', function(e) {
hideDiv(e);
});