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

您可以在标记中使用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>

两者都有效。

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

从没有ID的Img获取id

3 个答案: