标题很混乱。我只想创建一个指示订单状态的按钮。如果按下，则订单完成。如果它没有被压缩，它仍然悬而未决。
你知道这种功能的插件吗？
编辑
这是我决定采取的路线。
<div id="statuses"> <a id="first" class="status">Waiting</a>
<a id="second" class="status">Waiting</a>
</div>
<input type="button" id="reset" value="Reset" />
以下是按钮的JavaScript：
var COOKIE_NAME = "selection";
function getObjectProperties(obj) {
var keys = [];
for (var k in obj) keys.push(k);
return keys;
}
function deserialize() {
$.cookie.json = true;
//read object from cookies
var selection = $.cookie(COOKIE_NAME);
console.log(selection);
if (selection !== undefined) {
//go over each property (first, second, ...)
$.each(getObjectProperties(selection), function (index, element) {
//find button by id
var $elem = $("#" + element);
//read selection value for button
var isSelected = selection[element];
if (isSelected) {
//mark button as selected
$elem.addClass("selected").html("Ready");
}
});
}
}
function serialize() {
//initialize empty object
var selection = {};
//go over each button
$(".status").each(function (index) {
var $this = $(this);
//add new property to object and assigning value to it ({first:false, second:true /*,....*/})
selection[$this.attr("id")] = $this.hasClass("selected");
});
console.log(selection);
//save object to cookie
$.cookie(COOKIE_NAME, selection);
}
$(document).on("click", ".status", function (e) {
var $this = $(this);
$this.toggleClass("selected");
var isSelected = $this.hasClass("selected");
$this.html(isSelected ? "Ready" : "Waiting");
serialize();
});
$(document).on("click", "#reset", function (e) {
$(".status").removeClass("selected").html("Waiting");
serialize();
});
deserialize();
我也在头脑中声明了这些：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
有了这个，按钮按计划工作，但在页面刷新后它们不能保持这种状态。
答案 0 :(得分：2)
<input type="button" id="btn" value="Click to complete">
<script type="text/javascript">
window.onload = function(){
document.getElementById('btn').onclick = function(){
if(this.disabled){
return false; // already disabled; nothing to do
}
this.disabled = true;
this.value = 'Order Complete';
/* ANY OTHER FUNCTIONALITY YOU NEED */
}
}
</script>
答案 1 :(得分：1)
最简单的解决方案（因为你已经在使用jQuery），就是添加jQueryUI并使用.buttonset()：
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
$( "#radio" ).buttonset();
要记住刷新时的按钮状态，您可以将数据存储在服务器上（例如使用PHP $_SESSION），或使用HTML5 localstorage或cookie将其存储在本地。
这是一个非常简单的解决方案，名为jquery.cookie：
http://www.sitepoint.com/eat-those-cookies-with-jquery/
添加jQueryUI就像引用jQueryUI库和样式表（除了jQuery库）一样简单，如下所示：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>
答案 2 :(得分：1)
您可以toggle一些class并更改元素的html以显示您的选择
<a id="first" class="status">Waiting</a>
<a id="second" class="status">Waiting</a>
<a id="third" class="status">Waiting</a>
<a id="fourth" class="status">Waiting</a>
<!-- as many as you need -->
a.status {
background-color: #ff0;
border: 2px solid #777;
/*visualize as you wish*/
}
a.status.selected {
background-color: #0f0;
border: 2px solid #ccc;
/*visualize as you wish*/
}
$(document).on("click", ".status", function (e) {
var $this = $(this);
$this.toggleClass("selected");
var isSelected = $this.hasClass("selected");
$this.html(isSelected ? "Ready" : "Waiting");
});
如果您想 保存 选择状态，可以使用jquery.cookie
您必须添加一些JavaScript代码。
首先，您需要一些COOKIE_NAME变量
var COOKIE_NAME = "selection";
您需要两个功能。
首先将当前选择保存到某个对象并将其写入cookie：
function serialize() {
//initialize empty object
var selection = {};
//go over each button
$(".status").each(function (index) {
var $this = $(this);
//add new property to object and assigning value to it ({first:false, second:true /*,....*/})
selection[$this.attr("id")] = $this.hasClass("selected");
});
//save object to cookie
$.cookie(COOKIE_NAME, selection);
}
第二个功能将从cookie中读取选择并将其附加到所需的按钮：
function deserialize() {
$.cookie.json = true;
//read object from cookies
var selection = $.cookie(COOKIE_NAME);
if (selection !== undefined) {
//go over each property (first, second, ...)
$.each(getObjectProperties(selection), function (index, element) {
//find button by id
var $elem = $("#" + element);
//read selection value for button
var isSelected = selection[element];
if (isSelected) {
//mark button as selected
$elem.addClass("selected").html("Ready");
}
});
}
}
getObjectProperties()函数只返回对象属性的名称：
function getObjectProperties(obj) {
var keys = [];
for (var k in obj) keys.push(k);
return keys;
}
$.cookie.json = true;用于保存JSON对象的能力
所以，现在我们可以扩展以前的代码和
$(document).ready(function(){
deserialize();
$(document).on("click", ".status", function(e) {
var $this = $(this);
$this.toggleClass("selected");
var isSelected = $this.hasClass("selected");
$this.html(isSelected ? "Ready" : "Waiting");
serialize();
});
});
您需要添加jquery.cookie.js个文件 AFTER ，包括jquery.js。
所以
从Github下载，在您需要的位置托管，并包含为
<script src="yourPathToScript/jquery.cookie.js"></script>
或
将其从jsDelivr CDN中包含为
<script
src="//cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.js"></script>
第一种方式更可取