从没有 ID 的 Img 中获取 id

Question

我正在创建一个简单的引导图库缩略图，其中包含从数据库调用的图像。我成功调用了所有信息，但现在我正在努力获取每个图像的 id。这是我的代码：

 <div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
    <p><a href="#" onclick="return getID(this);" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

这是我在 javascript 中的函数：

function getID(e)
{
    var x = e.src;
    alert(x);
}

但它不起作用，如果从数据库中调用，我如何获取每个图像的 id？

Answer 1

你为什么不按照你写的方式来呢？

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
    <p><a href="#" onclick="return getID(<?php echo $row['ID_Category']?>);" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

function getID(id)
{
    alert(id);
}

Answer 2

function getID(obj){
   if(obj instanceof HTMLElement) {
   	alert(obj.getAttribute("data-target-id"));
   }
   else {
   	alert(obj);
   }
}

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
  <div class="caption">
    <h3>Example 1</h3>
    <p>Using data-* attribute</p>
    <p><a href="#" onclick="getID(this);" class="btn btn-primary" role="button" data-target-id="1">Button</a></p>
  </div>
</div>

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/PM5544_with_non-PAL_signals.png/320px-PM5544_with_non-PAL_signals.png" alt="test test">
  <div class="caption">
    <h3>Example 2</h3>
    <p>Passing id directly</p>
    <p><a href="#" onclick="getID(1);" class="btn btn-primary" role="button">Button</a></p>
  </div>
</div>

Answer 3

您可以在标签中使用 Attribute 标签并添加 onclick 函数来获取您的 id 值。我设置了category-id 属性并在javascript代码中使用这个标签来获取值

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
   <p><a href="#" onclick="return getID(this);" category-id="<?php echo $row['ID_Category']?>" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

那么这是脚本函数

<script>
function getID(obj)
{
    alert(obj.getAttribute("category-id"));
}
</script>

或者添加onclick函数并在这个函数中发送id

<div class="col-sm-6 col-md-4">
<div class="thumbnail">
  <img id="<?php echo $row['ID_Category']?>" src="<?php echo $row['category_image'] ?>" alt="<?php $row['Categories'] ?>">
  <div class="caption">
    <h3><?php echo $row['ID_Category']?></h3>
    <p><?php echo $row['Categories'] ?></p>
   <p><a href="#" onclick="return getID('<?php echo $row['ID_Category']?>');"  class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

这是脚本

<script>
function getID(id)
{
    alert(id);
}
</script>

两者都可以。