Convert Button onClick Funktion zu jQuery

Question

Derzeit haben Code in HTML, aber möchte es in JavaScript konvertieren. Sie können die Codes unten:

Ich möchte folgendes JQuery (anstatt in HTML) konvertieren:

<button id="1" onclick="swapStyleSheet('style1.css')">Button1</button> 
<button id="2" onclick="swapStyleSheet('style2.css')">Button2</button> 
<button id="3" onclick="swapStyleSheet('style3.css')">Button3</button> 

Der obige Code löst diesen:

var swapStyleSheet = function (sheet) { 
    document.getElementById('pagestyle').setAttribute('href', sheet); 
    storebackground(sheet); 
} 

var storebackground = function (swapstylesheet) { 
    localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value 
} 

var loadbackground = function() { 
    document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey')); 
} 

window.onload = loadbackground(); 

Danke!

Answer 1

Man könnte so etwas wie dies versuchen ..

// Here we get all the buttons 
 
var button = document.getElementsByTagName('button'); 
 

 
// We loop the buttons 
 
for (var i=0; i<button.length; i++){ 
 

 
    // Here we add a click event for each buttons 
 
    button[i].onclick = function() { 
 
    alert("style"+this.id+".css"); 
 
    //swapStyleSheet("style"+this.id+".css"); you can do it something like that; 
 
    } 
 
} 
 
var swapStyleSheet = function (sheet) { 
 
     //document.getElementById('pagestyle').setAttribute('href', sheet); 
 
     //storebackground(sheet); 
 
    } 
 

 
var storebackground = function (swapstylesheet) { 
 
     // localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value 
 
    } 
 

 
var loadbackground = function() { 
 
     //document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey')); 
 
    } 
 

 
//window.onload = loadbackground();

<button id="1">Button1</button> 
 
<button id="2" >Button2</button> 
 
<button id="3" >Button3</button>

Keine Notwendigkeit für JQuery

Answer 2

wie Sie für Click Event-Handler suchen sind gerade aussieht. Hier ist eine Version mit jQuery. Ich habe den Code, der sich mit dem fehlenden "pagestyle" -Element und dem lokalen Speicher beschäftigt, auskommentiert, um js-Fehler im StackOverflow-Snippet zu vermeiden.

var swapStyleSheet = function (sheet) { 
 
     console.log('sheet: ' + sheet); // look at the console when you press a button 
 
     //document.getElementById('pagestyle').setAttribute('href', sheet); 
 
     //storebackground(sheet); 
 
    } 
 

 
var storebackground = function (swapstylesheet) { 
 
     //localStorage.setItem("sheetKey", swapstylesheet); //you need to give a key and value 
 
    } 
 

 
var loadbackground = function() { 
 
     //document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey')); 
 
    } 
 

 
window.onload = loadbackground(); 
 

 
$('#1').on('click', function() { 
 
    swapStyleSheet('style1.css'); 
 
}); 
 
$('#2').on('click', function() { 
 
    swapStyleSheet('style2.css'); 
 
}); 
 
$('#3').on('click', function() { 
 
    swapStyleSheet('style3.css'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="1">Button1</button> 
 
<button id="2">Button2</button> 
 
<button id="3">Button3</button>

Answer 3

<button id="1" class='changestyle' data-stylesheet = "style1.css">Button1</button> 
<button id="2" class='changestyle' data-stylesheet = "style2.css">Button2</button> 
<button id="3" class='changestyle' data-stylesheet = "style3.css">Button3</button> 

jQuery

$(function(){ 
    $(".changestyle").on("click", function(){ 
     $("#pagestyle").attr("href", $(this).data('stylesheet')); 
    }) 
})