如何将动态ID（php）传输到javascript？

Question

I have created an image gallery with PHP. The user can delete each image: Clicking the button "Delete this Image?" will show him an image-overlay with 2 buttons "Delete" and "Cancel". The "Cancel"-button will hide the overlay.

Each image has it own ID. Now I want replace the "NAME-OF-IMG-WITHOUT-EXTENSION" in JavaScript with the ID created by PHP. Unfortunately, I do not know how to pass the ID to the Script... Here are the relevant code-areas:

<script>
$(document).ready(function(){
    $("#overlay_hide_" + "NAME-OF-IMG-WITHOUT-EXTENSION").click(function(){
        $(".overlay").fadeOut("fast");
    });
    $("#overlay_show_" + "NAME-OF-IMG-WITHOUT-EXTENSION").click(function(){
        $(".overlay").fadeIn("fast");
    });
});
</script>

<div class="overlay">
<a class="button_delete" onclick="deleteImage('<?php echo $filename['basename']; ?>')">Delete</a>
<a class="button_cancel" id="overlay_hide_<?php echo $filename['filename']; ?>">Cancel</a>
</div>

<img src="<?php echo $filename['basename']; ?>" />
<a id="overlay_show_<?php echo $filename['filename']; ?>">Delete this Image?</a>  

Answer 1

Embed the ID in your html somewhere. Then you can retrieve it via the click handler, e.g.

<div class="img" data-id="<?php echo $img_id; ?>">
   <img ... />
   <button onclick="removeMe(event);">X</button>
</div>

function removeMe(e){ // e = click event
  button = e.target;
  div = button.parent;
  id = div.dataset.id;
  ... do stuff with the id
}

Alternatively, just embed the ID directly in the click handler call:

<button onclick="removeMe(<?php echo json_encode($id); ?>);">X</button>

function removeMe(id) {
   ... do stuff with id
}