使用设置的时间更改jQuery移动按钮的值

2023年9月16日 192次阅读

由于我对jQuery mobile的了解不多,我面临着一个非常具有挑战性的问题.我已经研究了很多解决方案并实现了它们,但似乎没有用

>我有一个名为click me的按钮
>当用户点击该按钮时,该按钮将被禁用,文本clickme将更改为等待…
> 2秒后,该按钮被激活(不再禁用),文本从请等待…返回到单击我.
>我已经在某种程度上开始工作了.代码完全符合这个代码行$(this).parent(”).text(‘Please wait …’);但有人可以建议我如何让它与请等待….

任何帮助或指导将不胜感激.我的代码如下：

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    clickme
    <input class="submit button-primary btn large send" id="wp-submit" name="up_submit" tabindex="250" type="button" value="clickme">
</div>

$(document).ready(function () {
    var clicked = false;

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            $(this).button('disable');
            $(this).parent('').text('Please wait...');
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); 
                $(this).parent('').text('click me');
                clicked = false;
            }, 2000); 
        }
    });       
});

最佳答案 setTimeout应位于按钮单击的事件处理程序内.您还必须使用按钮的选择器,因为您将在setTimeout回调中丢失此上下文,并将设置单击返回false：

$(document).ready(function () {
    var clicked = false;

    $('#wp-submit').bind('click', function() {
        if(clicked === false) {
            $(this).button('disable');
            $('#wp-submit .ui-btn-text').val("Please wait...");
            clicked = true;

            setTimeout(function() { 
                $('#wp-submit').button('enable'); // 'this' no longer refers to button element
                $('#wp-submit .ui-btn-text').val("clickme");
                clicked = false;
            }, 2000); 
        }
    });       
});

工作小提琴：https://jsfiddle.net/7j0rfb56/

我不得不稍微更改代码,因为核心jQuery没有提供.button函数(也许这是jQuery mobile特定的).

编辑：我已根据您更新的代码改进了我以前的答案：

这里有很多问题,我会尽力解释每个问题：

>首先,您提供的HTML包含两个地方的文本 – 这是故意的吗？按钮上的value =“clickme”属性将设置按钮文本.您可能希望也可能不希望在div标签内立即省略额外的文本.我假设你想在这个例子中改变它们.
>使用.text()更改元素的文本也会替换该元素的全部内容.所以当调用$(this).parent(”).text(‘Please wait …’);您正在用新值替换text和button元素.我建议在标签标签中包装您想要更改的文本,以便您可以在其上调用.text().
>如前所述,当上下文发生变化时,您无法通过setTimeout回调中的$(this)访问该按钮.您必须事先存储一个可以在回调中使用的引用.

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
    <label>clickme</label>
    <input class="submit button-primary btn large send" id="wp-submit" name="up_submit" tabindex="250" type="button" value="clickme" />
</div>

$(document).ready(function () {
    var clicked = false;

    $('#wp-submit').bind('click', function() {
        if(clicked == false) {
            // store reference to the button clicked
            // this allows us to access it within the 
            // setTimeout callback below.
            var $btn = $(this);

            $btn.button('disable');
            $btn.siblings('label').text('Please wait...'); // sets the text for the label only
            $btn.val('Please wait...'); // sets the text on the button itself
            clicked = true;

            setTimeout(function() {
                // we can access our '$btn' variable inside
                // here, this avoids the issue of 'this'
                // losing context
                $btn.button('enable'); 
                $btn.siblings('label').text('click me');
                $btn.val('click me');
                clicked = false;
            }, 2000); 
        }
    });
});

示例jsfiddle：https://jsfiddle.net/vsdv9ghL/(再次,我删除了任何非jQuery移动代码).

点赞