0

我有一个简单的问题，如何删除我刚刚单击的项目？我没有很好的方法来跟踪它，我现在正处于最后的手段（这就是我要发布的），它会删除列表中的所有内容。

PHP/HTML/jQuery:

<div class="image-list">
<?php
$count = 1;
if ($hotelId) {
foreach(glob($hotelDir) as $filename=>$hotelvalue){
echo '<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
                                $count++;
                            }
                        }else{}
                        ?>
                    </div>
                    </div>
                    <script>
                    $('div.image-list li a.image-list').live('click', function() { 
                        bootbox.confirm("Are you sure you want to delete this image?", "Cancel", "Confirm", function(result) {
                            if (result) {
                                $('ul.image-list li a.image-list').closest('li').fadeOut(); 
                                $.post('assets/php/deletefile.php');
                            }
                        }); 
                    });
                    </script>

这是删除信息（现在是静态 PHP，它只删除第一个文件，我还没有其他方法）：

<?php 
session_start();
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . '*.*');

if(is_file($files[0]))
    @unlink($files[0]);

?>

更新：

感谢卡尔的回答，我对自己在做什么有了更好的了解，但我仍然无法删除这些。我不知道为什么。它们保持空白并表现得好像它们甚至不存在或按钮不起作用。

这是我更新的 PHP/HTML/jQuery：

<div class="image-list">
                                <?php
                                $count = 1;
                                if ($hotelId) {
                                    foreach(glob($hotelDir) as $filename=>$hotelvalue){
                                        echo '<li data-filename="' . basename($hotelvalue) . '" id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain"  data-filename="' . basename($hotelvalue) . '" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a data-filename="' . basename($hotelvalue) . '" class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" id="del'.$count.'" value="Delete"><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
                                        $count++;
                                    }
                                }else{}
                                ?>
                            </div>
                            </div>
                            <script>
                            $('li.image-list a.image-list').click( function () {
                                        var filename = $(this).attr('data-filename');
                                        $(this).remove();
                                        $.get('assets/php/deletefile.php?filename=' + filename).done( function() {
                                            // it succeeded
                                        }).fail( function (){
                                            // it failed
                                        });
                                }); 
                            });
                            </script>

PHP 也更新了：

<?php 
session_start();
$filename = $_get['filename'];
$files = glob("upload/" . $_SESSION['curHotelId'] . "/" . $filename);

if(is_file($files))
    @unlink($files);

?>

希望最终更新：

我是如此接近，我只想把我爱的一切都扔出窗外。所以这就是我遇到问题的地方。代码执行时它不会删除图像，所以这里是 PHP：

所有这些代码都有效。C：谢谢所有帮助过的人！

<?php 
session_start();
$file = $_POST['filename'];
$selHotelId = $_SESSION['curHotelId'];
$files = "upload/" . $selHotelId . "/" . $file;
unlink($files);
?>

jQuery：

$(document).ready(function(){
                                $("#imageClick").live("click", "li.image-list a.image-list", function () {
                                    var _clicked = $(this);
                                    var _filename = _clicked.attr('data-filename');
                                    _clicked.parents("li.image-list").fadeOut(function(){
                                        $(this).empty().remove();
                                    });
                                    $.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
                                        bootbox.alert('File has been deleted!');
                                    }).fail( function (error){
                                       bootbox.alert('There has been an error. Contact admin.');
                                    });
                                }); 
                            });
4

2 回答 2

1

您可以使用与此类似的语法使用 jQuery 删除或删除 DOM 元素，并提取在您的项目中传递的值：

$('div.image-list li a.image-list').click( function () {
    var filename = $(this).attr('data-filename');
    $(this).parents('li').remove();
});

您将像您所做的那样将数据传递给 PHP 文件，但文件名在 url 中：

$.get('assets/php/deletefile.php?filename=' + filename).done( function() {
    // it succeeded
}).fail( function (){
    // it failed
});

当您加载页面时，您必须将其加载data-filename="filename.jpg"到您单击的元素中。

在您的 deletefile.php 中，您可以使用$_GET['filename']来获取文件名。

于 2013-07-25T01:32:32.477 回答
1

您更新的代码中仍然存在一些问题。我做了一些更改，并粘贴在下面的代码中。我已将方法更改为$.post()，因此您的 PHP 文件将需要以$_POST['filename'].

我注意到几个问题，您有多个具有相同id属性的元素。data-filename我从不需要它们的元素中删除了多余的属性。我将您的 jQuery 放在 a$(document).ready()中，以确保在加载所有 DOM 元素之前不会调用任何内容。我还使用了.on绑定事件的方法……以防万一您li使用元素动态添加更多元素a.image-list。通过这种方式，您将事件绑定到将始终存在的元素，并在a.image-list. （我可能解释错了……已经晚了）。

希望这可以帮助。

<ul class="image-list">
<?php
    $count = 1;
    if ($hotelId) {
        foreach(glob($hotelDir) as $filename=>$hotelvalue){
            echo '<li id="del'.$count.'" class="image-list"><a class="enlargeUser" href="'.$hotelvalue.'"><img class="imageListMain" src="'.$hotelvalue.'" width="50px" height="50px"/><p class="filename">' . basename($hotelvalue) . '</p></a> <a class="btn btn-mini btn-primary image-list" style="width: 18px;margin-top: -35px;position: relative\9;top: -25px\9;border-radius: 100%;-moz-border-radius: 100%;-o-border-radius: 100%;-webkit-border-radius: 100%;margin-left:330px;" title="Delete" data-filename="' . basename($hotelvalue) . '" ><i class="icon-remove-circle icon-2" style="margin-left:-3px;"></i></a></li>' . "\n" . "<br>";
            $count++;
         }
    }
?>
</ul>
<script>
    $(document).ready(function(){
        $("ul.image-list").on("click", "li.image-list a.image-list", function () {
            var _clicked = $(this);
            var _filename = _clicked.attr('data-filename');
            _clicked.parents("li.image-list").fadeOut(function(){
                $(this).empty().remove();
            });
            $.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
                // it succeeded
            }).fail( function (error){
                // it failed
            });
        }); 
    })  
</script>

更新：我的代码中有错字......不确定你是否抓住了它。

var _filename = clicked.attr('data-filename');

应该...

var _filename = _clicked.attr('data-filename');

我很抱歉。

要查看您是否正在访问您的 PHP 文件，您可以执行类似这样的简单操作...

<?php
    $data["response"] = $_POST['filename'];
    echo json_encode($data);
?>

然后修改你的.done方法看起来像这样......

$.post('assets/php/deletefile.php', {filename: _filename}).done( function(data) {
     // it succeeded
     console.log(data);
}).fail( function (error){
     // it failed
});
于 2013-07-25T04:16:56.000 回答