[英]Convert Button onClick function to jQuery
Currently have code in HTML, but would like to convert it to JavaScript. 目前有HTML代码,但想将其转换为JavaScript。 You can see the codes below:
您可以看到以下代码:
I'd like to convert the following to JQuery (instead of in HTML): 我想将以下内容转换为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>
The above code triggers this: 上面的代码触发了这一点:
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();
Thanks! 谢谢!
You could try something like this.. 您可以尝试这样的事情。
// 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>
No need for JQuery 无需JQuery
Looks like you are just looking for click event handlers. 看来您只是在寻找click事件处理程序。 Here's a version using jQuery.
这是使用jQuery的版本。 I commented out the code dealing with the missing 'pagestyle' element and localstorage to prevent js errors in the StackOverflow snippet.
我注释掉了处理缺少的'pagestyle'元素和localstorage的代码,以防止StackOverflow代码段中出现JS错误。
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>
<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 jQuery的
$(function(){
$(".changestyle").on("click", function(){
$("#pagestyle").attr("href", $(this).data('stylesheet'));
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.