0

我已经苦苦挣扎了几个小时，我无法让以下代码工作；

<li>
<img width="100px" height="100px" src="$profile_picture">
<p>Username: $username</p>
<p>UserID: $userid</p>
<p>Bio: $bio</p>
<p>Website: $website</p>
<input type="button" value="Block" data-role="button" id="myButton"/>
</li>
<li data-role="list-divider"></li>

我想将按钮的值更改为“已阻止”，这是我的 javascript：

<script type="text/javascript">
$("input[type='button']").toggle(function () {
    $(this).val("Block");
}, function () {
    $(this).val("Blocked");
});
</script>

我正在使用以下版本的 jquery 和 jqm：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

知道为什么这不能正常工作吗？非常感谢所有帮助...TKS！

4

3 回答 3

6

以这种方式使用的toggle()函数在 jQuery 1.8 中被弃用并在 1.9 中被删除

$("#myButton").on('click', function(){
    $(this).val(function(i,val) {
        return val=='Block' ? 'Blocked' : 'Block';
    });
});

你应该在移动之前加载 jQuery：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

并记住文档准备功能，或者在底部添加代码。

于 2013-05-22T18:12:25.453 回答
5

您正在使用的toggle函数在 jQuery 版本 1.9 中被删除（版本已弃用：1.8，已删除：1.9）

http://api.jquery.com/toggle-event/

click您可以通过在处理程序上实现它并切换值来实现相同的目的。

为什么被移除？[版本 1.9]

http://jquery.com/upgrade-guide/1.9/#toggle-function-function-removed

这是“单击元素以运行指定功能”的签名.toggle()。它不应与.toggle()未弃用的“更改元素的可见性”相混淆。前者被删除以减少混淆并提高库中模块化的潜力。jQuery Migrate 插件可用于恢复功能。

为什么它被弃用了？[版本 1.8]

http://bugs.jquery.com/ticket/11786

你知道我们有两个 .toggles 吗？我们喜欢的那个会根据需要执行 .show 或 .hide，并记录在 http://api.jquery.com/toggle/中。另一个设置循环 .click 处理程序，并记录在 http://api.jquery.com/toggle-event/：

为方便起见，提供了 .toggle() 方法。手动实现相同的行为相对简单，如果 .toggle() 内置的假设证明是有限的，这可能是必要的。例如，如果将 .toggle() 应用于同一元素两次，则不能保证正常工作。由于 .toggle() 内部使用了一个点击处理程序来完成它的工作，我们必须解除对点击的绑定以移除一个附加在 .toggle() 中的行为，这样其他的点击处理程序就可以在交火中被捕获。该实现还在事件上调用 .preventDefault() ，因此如果在元素上调用了 .toggle() ，则不会跟踪链接并且不会单击按钮。

让我们把它从我们的痛苦中解脱出来。

于 2013-05-22T18:11:40.713 回答
0

除了人们所说的之外，您可以以稍微不同的方式使用另一个切换

 <input type="button" value="Block" data-role="button" class="myButton"/>
 <input type="button" value="Blocked" data-role="button" class="myButton" style="display:none;"/>

和

$(".myButton").on('click', function (){
    $('.myButton').toggle()
});
于 2013-05-22T18:14:10.040 回答