如何使用jQuery正确获取图像的id?

时间:2012-08-01 14:17:54

标签: php jquery

我有3个PHP页面,它们的功能是显示存储在数据库中的图像,如果双击一个图像,该图像的属性将显示在屏幕上。

  • update.php
  • list.php的
  • update_list.php

“update.php”有2个选择框:主要类别和子类别。如果您提交,“list.php”将通过jquery load()显示在“update.php”中。它与“list.php”和*“update_list.php”*具有相同的关系。 “list.php”包含图片,如果您双击一个图像,*“update_list.php”*将显示在屏幕左侧。

这些是代码:

Update.php

 <?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../mystyle.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#buttonList").click(function(){
        var main_id=$('#selectMainProList').val();
        var sub_id=$('#selectSubProList').val();
        $('#list').load('list.php?sub_id='+sub_id+'&main_id='+main_id);
        });

    $("#selectMainProList").change(function(){
        var main_cat_id=$('#selectMainProList').val();
        $('#selectSubProList').load('update.html', function(){
            $('#spanSubProList').load('update.php?selected='+main_cat_id+' #selectSubProList');
        });
    });


});
</script>
</head>
<body>
<?php
    $posted_parent = getGet('selected'); //birbirine bağlı selectboxlar'da main selectbox'ın id'sini tutar.
?>
<form id="formProList" method="POST">
    <table align="center">
        <tr>
            <td>Ana Kategoriyi Seçiniz</td>
            <td>
                <span id="spanMainProList" name="spanMainProList">
                    <select id="selectMainProList" name="selectMainProList">
                        <option value="0">--------------------------</option>
                        <?
                            $sql="Select * from kategori where ust_kat_id='0'";
                            $result=mysql_query($sql);
                            while($row = mysql_fetch_row($result))
                            {
                                $main_pro_id=$row[0];
                                $main_pro_name=$row[1]; 

                                echo "<option value='".$main_pro_id."'>".$main_pro_name."</option>";

                            }
                        ?>
                    </select>
                </span>
            </td>
        </tr>
        <tr>
            <td>Alt Kategoriyi Seçiniz</td>
            <td>
                <span id="spanSubProList">
                    <select id="selectSubProList" name="selectSubProList">
                        <option value="0">--------------------------</option>
                        <?
                            $sql="Select * from kategori where ust_kat_id='$posted_parent'";
                            $result=mysql_query($sql);
                            while($row = mysql_fetch_row($result))
                            {
                                $sub_pro_id=$row[0];
                                $sub_pro_name=$row[1];  

                                echo "<option value='".$sub_pro_id."'>".$sub_pro_name."</option>";
                            }
                        ?>
                    </select>
                </span>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" id="buttonList" name="buttonList" value="Search"/></td>    
        </tr>   
    </table>
</form>
<div id="list"></div>
</body>
</html>

list.php的

<?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/mystyle.css" />
<link rel="stylesheet" type="text/css" href="../../css/tooltip.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("img").dblclick(function(){
        var id=$('#hiddenID').val();
        alert(id);
        $("#update_pro").slideToggle();
        $('#update_pro').load('update_list.php?id='+id);
        });





});
</script>
</head>
<body>
<?php
    $main_cat_id=getGet("main_id"); 
    $sub_cat_id=getGet("sub_id");   
?>
<form>
<table align="center">
<tr>
<td>    
    <table align="center">
        <tr>
            <?php
                $sql="SELECT * FROM urun WHERE alt_kat_id='$sub_cat_id' and ana_kat_id='$main_cat_id'";
                $result=mysql_query($sql);
                $count=mysql_num_rows($result);
                $i=0;
                while($row=mysql_fetch_assoc($result,0))
                {
                    $image_dir=$row["resim"];
                    $id=$row["id"];
                    $isim_tr=$row["isim_tr"];
                    $aciklama_tr=$row["aciklama_tr"];
                    if($i!=2)
                    {
                        echo "<td>";
                        echo "<a href='#' class='tt'><img src='$image_dir' height='150' width='150'/><span class='tooltip'><span class='top'></span><span class='middle'>$aciklama_tr--$id</span><span class='bottom'></span></span></a><br>";
                        echo "<center><input type='button' id='buttonProDelete' value='Delete' /></center>";
                        echo "<br><center>$isim_tr</center>";
                        echo "<input type='hidden' id='hiddenID' value='$id' />";
                        echo "</td>";
                        $i++;
                    }
                    else
                    {
                        echo "<tr>";
                        echo "</tr>";
                        echo "<td>";
                        echo "<a href='#' class='tt'><img src='$image_dir' height='150' width='150'/><span class='tooltip'><span class='top'></span><span class='middle'>$aciklama_tr--$id</span><span class='bottom'></span></span></a><br>";
                        echo "<center><input type='button' id='buttonProDelete' value='Delete' /></center>";
                        echo "<br><center>$isim_tr</center>";
                        echo "<input type='hidden' id='hiddenID' value='$id' />";
                        echo "</td>";
                        $i=1;

                    }
                }
            ?>
        </tr>
    </table>
</td>
<td><div id="update_pro"></div></td>
</tr>
</table>
</form>
</body>
</html>

update.list.php

<?php
include('../../include/settings.php');
?>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/mystyle.css" />
<script src="../../include/all.js"></script>
<script type="text/javascript">

</script>
</head>
<body>
<?php 

    $id=getGet("id");
    echo $id;

?>


</body>
</html>

问题是我无法获取双击的图像的真实ID。我总是获取第一个ID!我想点击图片,之后,我想在同一页面显示该图片的属性。我该怎么做?

1 个答案:

答案 0 :(得分:1)

使用$(this)&lt; - 获取jquery对象jquery functionalites

this&lt; - 获取DOM元素 - javascript functionalites

$("img").dblclick(function(){
    var id=$(this).val();  // <-- $(this) for current clicked image
    alert(id);
    $("#update_pro").slideToggle();
    $('#update_pro').load('update_list.php?id='+id);
});

另外你说你想要这个ID,而不是像val()那样获得id

$(this).attr('id');

this.id