Question

我有这段代码：

<div class="item">
  <div class="hidden">44</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnAddCommentForAnswer').click(function () {
            alert(XXX);
        });

    });
  </script>    
</div>

<div class="item">
  <div class="hidden">12</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
  <script type="text/javascript">
    $(document).ready(function () {
        $('#btnAddCommentForAnswer').click(function () {
            alert(XXX)
        });

    });
  </script>  
</div>

当我按下class = item的同一个div按钮时，我应该把什么代码放在XXX以获取div = hidden的内容？
如果单击第一个按钮，则应获得44，而单击第二个按钮则获得12。

Answer 1

id's意味着独特;您可以考虑将id更改为class。有了这些，您可以使用如下所示的脚本来实现您的目标：

$(document).ready(function() {
    $('.btnAddCommentForAnswer').click(function() {
        alert($(this).siblings('.hidden').text());
    });
});

这是一个JSFiddle示例：JSFiddle

此外，您不需要在脚本中包含两个脚本标记！这个用<script>标签包装的脚本就是必要的：）

Answer 2

没试过，但这应该有效：

$(this).closest('div').text()

Answer 3

您无需多次重复javascript代码。此外，您不能在jquery中使用id，因为按钮具有相同的ID。这是jsfiddle http://jsfiddle.net/t8XJZ/，它可以解决您的问题。

Answer 4

也许这对你更有用......

jquery的：

$(document).ready(function () {
     $('.item').each(function(){
         $(this).find("#btnAddCommentForAnswer").click(function () {
            alert($(this).prev(".hidden").text())
        });
    });
 });

HTML：

<div class="item">
  <div class="hidden">44</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />  
</div>

<div class="item">
  <div class="hidden">12</div>
  <input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>

单击按钮，使用JQuery选择同级元素

4 个答案: