将按钮onClick函数转换为jQuery

时间:2017-12-11 05:59:29

标签: javascript jquery html

目前有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();

谢谢!

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

看起来您只是在寻找点击事件处理程序。这是一个使用jQuery的版本。我评论了处理缺失的&#39; pagestyle&#39; element和localstorage用于防止StackOverflow片段中的js错误。

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

答案 2 :(得分:0)

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