Question

感谢您查看我的问题。基本上是怎么回事，我在1页上有几个（12）输入字段（id =“editname”）和div（id =“iconbar”）。当您单击输入字段时，我希望图标栏滑入，并在出现以下任一情况时滑出： 1. onblur 2.点击支票 3.单击x

我也在页面上加载了jquery。

有一个$ id变量可以获取数据库的记录ID，因此我可以根据需要将其分配给ID。

非常感谢任何帮助。这是我的代码：

<div class="recordset">
    <div class="boxes">
        <input type="text" name="name" id="nameedit<?php echo $id; ?>" value="'.$name.'" />
        <input type="hidden" name="number" value="'.$number.'" />
        <input type="hidden" name="id" value="'.$id.'" />
        <div class="clearfix"></div>
        <div class="recordbottom">
            <div class="playrecord">
                <embed ... (left blank) />
            </div>
            <div class="icons" id="icons<?php echo $id; ?>">
                <a href="records.php"><img src="x.png" width="18" /></a>
                <a href="#"><img src="check.png" width="18" /></a>
            </div>
        </div>
    </div>
</div>

如果您有任何其他问题，请不要犹豫。

编辑：我尝试了大约25 - 30种不同的方法，即使是简单的CSS焦点伪装，我一直在尝试的最新事情是：

$('#nameedit').focus(function() {
    $('div.icons').show().bind('focusoutside clickoutside',function(e) {
        $(this).unbind('focusoutside clickoutside').fadeOut('medium');
    });
});
$('div.icons').hide();

这没有用，我试过的另一种方法是：

好吧....我用完了所有的Ctrl-Z，所以我无法显示任何确定的内容。我搜索了jquery，并用Google搜索了许多不同的尝试，以及从这里大约20个左右。

PHP是我的主要编程语言，JS很适合我。

Answer 1

我做了这个：http://fiddle.jshell.net/5GB4Z/

请注意我引用了jquery 1.8.3，我认为'on'方法不适用于一些旧的jquery版本。

Answer 2

嗯，我想坚持不懈就是奖励......

http://jsfiddle.net/AgGPh/

$('.editrecord').on('focus', function () {
    $('#icons' + $(this).data('target')).show("slow", function() {
        $( this ).prev().hide( "fast", arguments.callee );
    });
});
$('.editrecord').on('blur', function () {
    $('#icons' + $(this).data('target')).hide("slow", function() {
        $( this ).prev().hide( "fast", arguments.callee );
    });
});

虽然它不漂亮，但它很实用。我不确定这是否是最好的方法，虽然它适用于小提琴，但会尝试使用我的代码，看看会发生什么。

谢谢大家，杰夫

Answer 3

好的，到目前为止，我甚至做得更好，现在的问题是？这是正确的方法吗？

$（'editrecord'）部分将首先获取输入的值并将其存储在变量中供以后使用（当有人点击取消图像时，它会将文本放回原处）。然后显示带有动画幻灯片的图标栏（图标栏包含X和CHECK，用于取消和保存）。由于玩家栏占据了每个记录的整个长度，因此它将以幻灯片动画隐藏玩家栏。

$（'。save_record'）部分将等待CHECK上的点击，点击它然后将记录ID发送到等待saverec.php（我只是注意到我有一个带有ID的GET同样，我不需要那个，因为我通过POST发送）。我应该把iconbar隐藏和播放器栏显示在成功函数中，但它现在都可以正常工作。

最后，$（'。cancel_record'）部分执行3个简单的操作，将文本替换回输入框中（因为它们确实取消了），隐藏图标并显示播放器栏。

对于我第一次用jQuery尝试JavaScript（在我看来），这并不算太糟糕。

$('.editrecord').on('focus', function (){
    editname = $('#editname' + $(this).data('target')).val();
    $('#iconbar' + $(this).data('target')).show("slow", function() {});
    $('#playerrecord' + $(this).data('target')).hide("slow", function() {});
});

$('.save_record').on('click', function (){
    $.ajax({
        type: "POST",
        url: "saverec.php?id=" + $(this).data('target'),
        data: jQuery('#saverecord' + $(this).data('target')).serialize(),
        success: function(data){
        }
    });
    $('#iconbar' + $(this).data('target')).hide("slow", function() {});
    $('#playerrecord' + $(this).data('target')).show("slow", function() {});
})

$('.cancel_record').on('click', function () {
    $('#editname' + $(this).data('target')).val(editname);
    $('#iconbar' + $(this).data('target')).hide("slow", function() {});
    $('#playerrecord' + $(this).data('target')).show("slow", function() {});
});

多个文本输入需要onfocus来显示多个div

3 个答案: