编辑输入框 Jquery/PHP 中的问题

Question

我在单击编辑按钮以移动标签数据以输入文本数据时遇到问题！

当我单击编辑按钮时，标签数据被替换为输入文本框，我使用 jquery 隐藏/显示！它的第一行工作正常，我能够在 mysql db 中更新！！。 当我单击第 2 行和第 3 行的编辑按钮时，输入 texbox 会在第 1 行弹出，当我单击第 2 行和第 3 行的取消按钮时，它会将其替换为 mysql 表 ID。

如有任何帮助，谢谢！

引导程序/PHP 代码

我正在从 mysql 数据库中获取数据

if(isset($_POST['display']))
{
    $sql = "select * from demo";
    $result = mysql_query($sql);
    while($row = mysql_fetch_object($result))
    {       
    ?> 
    <div class='container'>
        <div class='row'>
            <div class='col-md-4'>
                <label  style="display:block-inline;" class="feed_label" id="feed_label" idl='<?php echo $row->id;?>'>
                    <?php echo $row->url; ?>
                </label>
                <input name="url1" class="form-control url1" value="<?php echo $row->id;?>" id="url1" type="text"  style="display:none;">
            </div>
            <div class='col-md-2'>
                    <a ide='<?php echo $row->id;?>'  id="edit" class='edit' href="#" style="display:block-inline;">EDIT</a>
                    <a idc='<?php echo $row->id;?>' id="cancel" class='cancel btn btn-warning btn-sm' href='#' style='display:none;'>CANCEL</a>
            </div>
        </div>
    </div>
    <?php 
    }
    exit();
}

将标签替换为输入文本的 JQuery 代码，反之亦然

$('body').delegate('#edit','click',function(){
    $('#feed_label').hide();
    $('#url1').show();
});
$('#cancel').click(function(){
    $('#feed_label').show();
    $('#url1').hide();
});

Answer 1

您有多个具有相同 is(id="edit", id="cancle" 和 id="feed_label") 的元素。请注意，该 id 在您的 html 文档中必须是唯一的。 试试这个：

Js：

$('.edit').on('click', function(e){
var btn = jQuery(e.delegateTarget);
    var id = btn.attr('rid');
    $('#feed_label'+id).hide();
    $('#url'+id).show();
});

$('.cancel').on('click', function(e){
    var btn = jQuery(e.delegateTarget);
    var id = btn.attr('rid');
    $('#feed_label'+id).show();
    $('#url'+id).hide();
});

PHP：

<?php
if(isset($_POST['display'])) {
    $sql = "select * from demo";
    $result = mysql_query($sql);
    while($row = mysql_fetch_object($result)) {
        echo '<div class="container">'.
            '<div class="row">'.
                '<div class="col-md-4">'.
                    '<label style="display:block-inline;" class="feed_label" id="feed_label'.$row->id.'">'.
                        $row->url.
                    '</label>'.
                    '<input name="url1" class="form-control url1" value="'.$row->id.'" id="url'.$row->id.'" type="text" style="display:none;">'.
                '</div>'.
                '<div class="col-md-2">'.
                    '<a rid="'.$row->id.'" class="edit" href="#" style="display:block-inline;">EDIT</a>'.
                    '<a rid="'.$row->id.'" class="cancel btn btn-warning btn-sm" href="#" style="display:none;">CANCEL</a>'.
                '</div>'.
            '</div>'.
        '</div>';
    }
    exit();
}
?>