select - 如何在 jQuery 中获得独特的值(value)？

Question

我正在学习 jQuery。

我在 HTML 文件中有以下代码块:

<table width="100%">
<tr>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='1'><img src='images/1.gif'></a>
        </div>
    </td>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='2'><img src='images/2.gif'></a>
        </div>
    </td>
    <td align='center'>
        <div>
            <a id='get_this' href='#'>
            <input type='hidden' id='id' value='3'><img src='images/3.gif'></a>
        </div>
    </td>
</tr>

我想要做的是，当我单击任何图像时，我可以获得 <input hide> 值，以便我可以显示信息。比如我点击id=1，那么我就会在其他地方显示id1的信息。我试过这个:

$("a#get_this").click(function(){
        var id = $('input[type=hidden]#id').val();
        window.alert("You have chosen the id: " + id);
});

它总是返回 id: 1 给我。

Answer 1

ID 在 HTML 文档中必须是唯一的。我认为如果您有多个具有相同 ID 的元素，则行为是未定义的，但大多数浏览器可能会选择第一个。

改用类:

<table width="100%"> 
<tr> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='1'><img src='images/1.gif'></a> 
        </div> 
    </td> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='2'><img src='images/2.gif'></a> 
        </div> 
    </td> 
    <td align='center'> 
        <div> 
            <a class='get_this' href='#'> 
            <input type='hidden' value='3'><img src='images/3.gif'></a> 
        </div> 
    </td> 
</tr>

和JS:

$("a.get_this").click(function(){
        // find all input elements inside "a" (which is only one)
        var id = $(this).find('input').val(); 
        window.alert("You have chosen the id: " + id);
    });