Question

我有一个简单的html文本框连接到.keypress(funcion(){...}，只要我按下键盘上的一个键，就会在它旁边显示一个jquery图标。这样做的目的是在文本框中输入一些输入时显示一个jquery ui图标，这样当单击该图标时，它会保存用户的输入

它做了我想做的事......但我们都知道计算机语言往往是文字的。每次按一个键......都会出现一个新的保存图标......每一次。请帮助我，因为我被困在这一部分..

P.S。对于jquery ui图标，它有一个悬停功能..当我把图标

<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div>

在.append内部，它会在出现时禁用（禁用悬停，因此保持一种颜色）。如果这个知识是关于你如何启动悬停，当它来自追加并且你愿意分享时，会非常酷。

        $(".solo1").keypress(function () {
        $("#kyo").append('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />');
    });
</script>
<div id="kyo"> <input class="solo1" /> </div>

Answer 1

您有几种不同的选择。首先，在按键上添加按钮似乎有点过于频繁。您可能希望在.change或.blur等其他活动上添加该按钮。话虽如此，使用您当前的代码，您需要做的就是检查按钮是否已经存在，如果它没有，则将其附加。

$kyo = $("#kyo");  
if( $kyo.find('.saveButton').length === 0 ) // if button doesn't exist
    $kyo.append('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />');

Answer 2

您只需在页面加载时创建所有按钮，并在按下某个键时显示相应的按钮。然后在单击按钮时再次隐藏它：http://jsfiddle.net/jC7TR/1/。

$('.solo1').after('<div class="ui-state-default ui-corner-all saveButton" title="Save" style="float:left; height:20px;" ><span class="ui-icon ui-icon-disk"></span></div><br />')
.keypress(function() {
     $(this).next('.saveButton').show();
});

$('.saveButton').hide().click(function() {
    $(this).hide();
});

Answer 3

而不是keypress，您可以使用.blur()在点击文本框后显示图标吗？

.append问题。限制.append

3 个答案: