Question

嗨我是php的新手我尝试传递图像上的值点击通过ajax调用但我找不到点击该图像的值

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type= "text/javascript">
        function getItem()
        {
            var dataString = "category_id=" +$(".category_id").val();
            alert(dataString);
            alert(category_id);
            $.ajax({
              type: "GET",
              url: "header.php",
              data: dataString,
              success:function(data)
              {
                $("#partyId").html(data); 
              }
          });
        }
  </script>
</head>

我的html代码就像这样我在尝试点击该图片获取该类别ID但我无法在点击图片上获得此ID

<?php
$catarray = array();
$selectcat = "SELECT * FROM category";
$selectcatRes = mysql_query($selectcat);
while($row = mysql_fetch_assoc($selectcatRes))
{
$category_id = $row['category_id'];
$category_nm = $row['category_nm'];
$cat_img = $row['cat_img'];
echo'<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 category_id">
<a href="images/product_1.jpg" class="fh5co-figure to-animate image-popup category_id"  onclick="getItem();">
<figure>
<img width="500" height="300" src="vraj/_cat_img/thumb/'.$row['cat_img'].'" onclick="getItem();" class="img-responsive category_id">
</figure>
<h3 class="fh5co-figure-lead">'.$category_nm.'</h3>
<p class="fh5co-figure-text"></p>
</a>
</div>';
}
?>

Answer 1

您没有在任何地方输出类别ID，因此无法检索它。

将其输出到div上的数据属性，删除其他category_id类，然后将click事件更改为委托，如下所示（删除getItem）。使用此功能，您可以在单击锚点或图像时获取类别ID。

我还改为将对象作为ajax数据传递，因为不需要连接自己的数据字符串。

<强> jsFiddle demo

更新了PHP：

while($row = mysql_fetch_assoc($selectcatRes))
{
$category_id = $row['category_id'];
$category_nm = $row['category_nm'];
$cat_img = $row['cat_img'];
echo'<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 category_id" data-category_id="' . htmlspecialchars($category_id) . '">
<a href="images/product_1.jpg" class="fh5co-figure to-animate image-popup">
<figure>
<img width="500" height="300" src="vraj/_cat_img/thumb/'.$row['cat_img'].'"  class="img-responsive">
</figure>
<h3 class="fh5co-figure-lead">'.$category_nm.'</h3>
<p class="fh5co-figure-text"></p>
</a>
</div>';
}

更新了JavaScript：

<script type= "text/javascript">
    $(document).on('click', '.category_id a.image-popup, .category_id img.img-responsive', function(){
        var category_id = $(this).closest('.category_id').data('category_id');
        alert(category_id);
         $.ajax({
            type: "GET",
            url: "header.php",
            data: { category_id : category_id },
            success:function(data)
            {
                $("#partyId").html(data); 
            }
          });
          return false;
      });
</script>

Answer 2

有些事情不起作用。

您的img标记没有category_id属性
您从未定义过名为category_id
您有一个名为id的多个元素，您应该使用value来拥有一个唯一的选择器。
我想src你的意思是.attr('src')属性？这将是val()而不是val()。 <h3 id="title1">Test</h3>仅用于输入字段，因为它们实际上具有用于存储数据的值属性。

无法在图像标记中传递值

2 个答案: