0

谢谢你看我的问题。基本上发生了什么，我在 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，并在谷歌上搜索了许多不同的尝试，以及从这里开始的大约 20 次。

PHP 是我的主要编程语言，而 JS 对我来说是触手可及的。

4

3 回答 3

0

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

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

于 2013-11-12T13:25:24.223 回答
0

好吧，我想坚持不懈会带来回报...

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 );
    });
});

虽然不好看，但是很实用。我不确定这是否是最好的方法，尽管它在小提琴中有效，但会尝试使用我的代码，看看会发生什么。

谢谢大家，杰夫

于 2013-11-12T13:57:09.003 回答
0

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

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

$('.save_record') 部分将等待单击 CHECK，然后单击它会将记录 ID 发送到等待 saverec.php （我刚刚注意到我在那里也有一个带有 ID 的 GET，我不再需要那个了，因为我是通过 POST 发送的）。我可能应该将图标栏隐藏和播放器栏显示放在成功函数中，但无论哪种方式现在都可以使用。

最后 $('.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() {});
});
于 2013-11-13T04:00:06.620 回答