取消选择 jQuery 链接按钮答案

【问题标题】：Deselect jQuery link button取消选择 jQuery 链接按钮
【发布时间】：2012-10-12 06:54:26
【问题描述】：

我对 jQuery 的链接按钮有疑问。我在网上找到的大多数论坛条目都是关于表单按钮或复选框而不是链接按钮的搜索“jQuery 链接按钮取消选择”句柄。所以我希望这里有人可以帮助我:-)。

问题描述：我的网页上有一些静态链接按钮，点击它我会调用一个 javascript 函数并更改按钮上的文本。现在我的问题是按钮在更改文本后仍然被选中，这是不应该的。

index.html:

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <script src="jquery-mobile/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
  <script src="basic.js" type="text/javascript"></script>
</head>
<body>
...
<a href="#" data-role="button" onmouseup="nextStep(1)" id="button1">Example1</a>
<a href="#" data-role="button" onmouseup="nextStep(2)" id="button2">Example2</a>
<a href="#" data-role="button" onmouseup="nextStep(3)" id="button3">Example3</a>
...
</body>

basic.js

function nextStep(buttonIndex){
  $("#button1 .ui-btn-text").text("Example4");
  $("#button2 .ui-btn-text").text("Example5");
  $("#button3 .ui-btn-text").text("Example6");
}

上面的代码是我正在做的一个例子。在设置新文本后如何开始描述按钮仍处于选中状态。有人知道取消选择按钮的解决方案吗？

选中按钮的图片：http://up.picr.de/12133494ev.png

感谢您的帮助:-)。

托马斯

--------------

感谢您的快速回复。我尝试了这个建议

function nextStep(buttonIndex){
  $("#button1 .ui-btn-text").text("Example4").removeClass('ui-btn-active');
  $("#button2 .ui-btn-text").text("Example5").removeClass('ui-btn-active');
  $("#button3 .ui-btn-text").text("Example6").removeClass('ui-btn-active');
}

不幸的是，它没有按预期工作。更准确地说，我看不到任何行为变化。

请注意，您的页面可能还有其他元素会导致此类行为。

按钮是带有其他元素（标题和表格）的页面的一部分，我通过 javascript 在其中更改内容。但对我来说，不清楚这应该如何影响按钮的行为。

例子：

var table = document.getElementById('solution');
var cell = table.rows[1].cells[1];
cell = table.rows[2].cells[1];
cell.firstChild.data = "";
cell = table.rows[3].cells[1];
cell.firstChild.data = "";
cell = table.rows[4].cells[1];
cell.firstChild.data = "";
...

或

$("#headline").empty();
headlineOutput = "Buttons";
$("#headline").append(headlineOutput);

有什么建议或提示吗？

谢谢。

--------------

function nextStep(buttonIndex){
  $("#button1 .ui-btn-text").text("Example4").blur();
  $("#button2 .ui-btn-text").text("Example5").blur();
  $("#button3 .ui-btn-text").text("Example6").blur();
}

这个提议也没有改变行为:-(。

我缺少类似 Qt 函数“setCheckable(false) 和 setFocusPolicy(Qt::NoFocus)”;-)。

感谢您的帮助。

【问题讨论】：

@undefined 我喜欢你让他define选中的方式。 ;)
未选中的按钮为亮灰色，选中的按钮为蓝色且焦点（在按钮周围用虚线框可见）。
我在描述中添加了一张图片以可视化它的外观：up.picr.de/12133494ev.png
我在这个帖子中找到了解决方案：stackoverflow.com/questions/7507099/… :-)

标签： javascript jquery html cordova jquery-mobile

【解决方案1】：

试试这个：

function nextStep(buttonIndex){
  $("#button1 .ui-btn-text").text("Example4").blur();
  $("#button2 .ui-btn-text").text("Example5").blur();
  $("#button3 .ui-btn-text").text("Example6").blur();
}

如果这不起作用，试试这个：

function nextStep(buttonIndex){
  $("#button1 .ui-btn-text").text("Example4").removeClass('ui-btn-active');
  $("#button2 .ui-btn-text").text("Example5").removeClass('ui-btn-active');
  $("#button3 .ui-btn-text").text("Example6").removeClass('ui-btn-active');
}

【讨论】：

我尝试了这两种解决方案，但没有改变任何行为（请参阅我的附加说明）。感谢您的帮助。

【解决方案2】：

我在这里创建了一个小提琴：http://jsfiddle.net/japanick/Lc9rp/

它按预期工作，从您拥有的代码开始。你可以试一试，看看它是否按照你的预期工作。请注意，您的页面可能还有其他正在运行的元素会导致此类行为。

【讨论】：

感谢您制作小提琴 :-)。如果我尝试使用“.blur()”和“.removeClass('ui-btn-active')”的建议，我在这里看到它是在单击后仍处于选中状态。
我在这个帖子中找到了解决方案：stackoverflow.com/questions/7507099/… :-)