在php foreach中使用jquery动态选择器删除单个图像

Delete individual image using jquery dynamic selector inside php foreach

本文关键字：选择器 动态 删除 单个 图像 jquery php foreach      更新时间：2023-09-26

我试图删除文件夹内的图像，在那里我使用PHP glob()单独访问它们&然后使用jquery-leanmodal弹出确认表单，然后通过$.post()发送请求，这样页面就不需要刷新了。

但是，它不起作用。

谁来猜猜，我哪里做错了?

我想做什么

我正在使用glob从文件夹中抓取所有图像。然后我将它们显示在一个网页的表格中。在表中，我将每个映像链接到一个删除选项(通过href)。要删除图像，用户单击链接，该链接将运行jQuery脚本，从而显示一个确认弹出式表单。在确认后，运行$.post();查询，该查询被定向到包含删除链接文件/图像的代码的url。

发生了什么/输出

当用户单击链接时，URL变为.php#imagename_jpg，但没有弹出确认表单。

没有foreach代码也能正常工作。

注意:我把代码中的所有注释放在行中。我希望现在很容易理解。

<?php
  $dirname = "../assets/img/logos/";
  $images = glob($dirname."*.{jpg,png,gif,tiff,jpeg,JPG}", GLOB_BRACE); //using PHP `glob()` to access images inside path, individually
  foreach($images as $image) {
    $variable_id = str_replace(".", "_", $image); // creating a dynamic id, from each image-name
?>
// below starting ,code to link - to delete/unlink this image file on clicking `id=modaltrigger`, followed by a pop-up confirmation form.
<p style="text-align: center; font-size: 10px; margin-top: 5px;">
  <a id="modaltrigger_<?=$variable_id ?>" href="#<?=$variable_id ?>" class="btn" style="border: none !important;">Delete</a>
</p> // i hope this code is simple to understand
// pop-up confirmation form
<div id="<?=$variable_id ?>" class="popupContainer" style="display:none;">
  <div class="deleteplogo_<?=$variable_id ?>">
    // some form code to pop-up with submit button & `action=post`
  </div>
</div>
<!-- jquery : delete image confirmation: pop up based on leanModal jquery UI -->
<script type="text/javascript">
  var magica = <?php echo $variable_id; ?>; // using php variable in jquery
  $('#modaltrigger_'+magica).leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" }); // variable selector
  $(function() {
    // Calling popUp delete Form on clicking variable-id of ahref above
    $('#modaltrigger_'+magica).click(function() {
      $('.deleteplogo_'+magica).show(); // showing up hidden class above
      //$(".header_title").text('Are you sure , you want to delete?');
      return false;
    });        
  })
</script>
<?php
  }
?>

删除所有AJAX-JQUERY代码&使用:

file1.php 

    <td>
    <p style="text-align: center; font-size: 10px; margin-top: 5px;">
    <a id="modaltrigger_<?= $variable_id ?>" href="delete.php?id=<?php echo $imageName; ?>" class="btn"
    style="border: none !important;">Delete</a>
    </p>
    </td>

delete.php 

    <?php
    $filePath = "D:/folder/".$_GET['id'];
    if(is_file($filePath)){
    @unlink($filePath);
    echo ('<strong>SUCCESS! Deleted: &nbsp; <span style="color:red">'. $_GET['id']. '</span>,&nbsp; file from Directory</strong>');
    }
    else if(!unlink($filePath)){ 
    echo ("Error deleting file : ". $_GET['id']. " Already deleted OR doesn't EXIST"); 
    }
    ?>

效果很好!谢谢!

相关文章：