javascript - 将按钮 onClick 函数转换为 jQuery

Question

目前有 HTML 代码，但希望将其转换为 JavaScript。您可以看到下面的代码:

我想将以下内容转换为 JQuery(而不是 HTML):

<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>

上面的代码触发这个:

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();

谢谢!

Answer 1

你可以尝试这样的事情..

// 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>

不需要JQuery