Develop Reference

How to create a loop using jQuery

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');
})

Propagating dark mode changes across all pages

Is there any way of getting the changes of enabling/disabling dark mode to propagate on all pages of my site without changing the CSS?
My jQuery.js code
onload = function() {
if(localStorage.getItem("darkMode") === "true") {
var mode = localStorage.getItem("darkMode");
enableDarkMode();
}
}
function enableDarkMode() {
$( "body" ).addClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-light");
$( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
$( '.inner-switch' ).text( "ON" );
var mode = localStorage.setItem("darkMode", "true");
}
function disableDarkMode() {
$( "body" ).removeClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark");
$( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
$( '.inner-switch' ).text( "OFF" );
var mode = localStorage.setItem("darkMode", "false");
}
$( '.inner-switch' ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
disableDarkMode();
} else {
enableDarkMode();
}
});

It looks like you have a working solution in your question. You can simply put that code into a $(document).read() statement and implement it once the user loads the page.
Alternatively, you can set a timer to check on the value of your darkMode variable and update on change.

organise a dropped element into another one

I'm working on a project that works like that. I drag and drop some elements to some droppables and take the out again to the middle. Every droppable can have many dragged elements inside. it works fine when i work with one element, but whene it is more then one , it didn't , i didn't know how to make the two elements draggable and drop them both into the droppable and appears there fine . here is the funtion :
$(function() {
$( "#myDIV1,#myDIV2" ).draggable({ cursor: 'move'});
$( ".drop" ).droppable({
drop: function( event, ui ) {
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( "#myDIV1,#myDIV2" ).css( "height", "50%" );
$( "#myDIV1,#myDIV2" ).css( "width", "50%" );
$( "#myDIV1,#myDIV2" ).find( "p" ).html( "cool!" );
},
out: function( event, ui ) {
$( this )
.addClass( "drop" )
.find( "p" )
.html( "Dropped! out" );
$( "#myDIV1,#myDIV2" ).css( "height", "400px" );
$( "#myDIV1,#myDIV2" ).css( "width", "370px");
$( "#myDIV1,#myDIV2" ).find( "p" ).html( "Drag me to my target" );
}
});
$( ".dropLeftRight" ).droppable({
drop: function( event, ui ) {
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
$( "#myDIV1,#myDIV2" ).css( "height", "50%" );
$( "#myDIV1,#myDIV2" ).css( "width", "50%" );
$( "#myDIV1,#myDIV2" ).find( "p" ).html( "cool!" );
},
out: function( event, ui ) {
$( this )
.addClass( "drop" )
.find( "p" )
.html( "Dropped! out" );
$( "#myDIV1,#myDIV2" ).css( "height", "400px" );
$( "#myDIV1,#myDIV2" ).css( "width", "370px");
$( "#myDIV1,#myDIV2" ).find( "p" ).html( "Drag me to my target" );
}
});
});

Reset setTimeout

I have problem with reset setTimeout. I tried use clearTimeout():
function formMsg(text){
if (text == "success"){
$( ".alert-msg" ).removeClass( "hidden alert-danger" ).addClass( "alert-success" );
$( ".alert-success .msg" ).html( "<b>Well done!</b> You successfully added order." );
} else {
$( ".alert-msg" ).removeClass( "hidden alert-success" ).addClass( "alert-danger" );
$( ".alert-danger .msg" ).html( "<b>F***!</b> Something went wrong." );
}
window.clearTimeout(timer);
var timer = window.setTimeout(function()
{
$(".alert-msg").fadeOut("slow", function() {
$(this).addClass('hidden').show(0);
});
}, 2000);
}
but with no result. I expect that when you click, the timer has measured two seconds again.

That is because you initialize the variable as local (inside your function).
This will do the trick:
window.clearTimeout(formMsg.timer);
formMsg.timer = window.setTimeout(....)

move the timer out of the function context like so:
var timer = null; //initialize
function formMsg(text){
if (text == "success"){
$( ".alert-msg" ).removeClass( "hidden alert-danger" ).addClass( "alert-success" );
$( ".alert-success .msg" ).html( "<b>Well done!</b> You successfully added order." );
} else {
$( ".alert-msg" ).removeClass( "hidden alert-success" ).addClass( "alert-danger" );
$( ".alert-danger .msg" ).html( "<b>F***!</b> Something went wrong." );
}
if(timer !== null)
window.clearTimeout(timer);
var timer = window.setTimeout(function()
{
$(".alert-msg").fadeOut("slow", function() {
$(this).addClass('hidden').show(0);
});
}, 2000);
}

By selecting a class, another div display none in jquery

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