Question

我正在尝试创建一些jquery代码来更新元素，但我遇到了问题。它不会更新，我认为它是因为元素id？

这是我的JS代码：

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#vote_button_" + $(this).attr('id')).click(function()
        { 
            $("div#vote_count").show().html('<h2>voting, please wait...</h2>');
        });
    });
</script>

这是HTML代码：

<div class="vote_container"> 
    <div class="vote_button" id="vote_button_31"><img src="/images/picture_31.png"></div> 
    <div class="vote_count" id="vote_count">0</div> 
</div>

Answer 1

你告诉它使用文件的ID（我认为）。

你当然可以这样做：

    $("#vote_button_31").click(function()
    { 
        $("#vote_count").show().html('<h2>voting, please wait...</h2>');
    });

如果您希望代码适用于所有投票按钮，请尝试以下操作：

    $(".vote_button").click(function()
    { 
        $(this).siblings('.vote_count').show().html('<h2>voting, please wait...</h2>');
    });

Answer 2

$("#vote_button_" + $(this).attr('id')).click(function()...

您调用它的方式，this根本没有上下文。由于您在div上有一个课程，为什么不使用它呢？

$(".vote_button").click(function() {...

如果您在加载页面时不知道有问题的ID，那也会有效。如果您动态添加divs，那么您可能希望使用live或delegate：

$(".vote_button").live("click", function() {...

Answer 3

为什么不直接选择元素：

<script type="text/javascript">
    $(document).ready(function()
    {
        $("div#vote_button_31").click(function()
        {
            $("div#vote_count").show().html('<h2>voting, please wait...</h2>');
        });
    });
</script>

Answer 4

你不能这样做。相反，试试这个：

<script type="text/javascript">
$(document).ready(function()
{
    $(".vote_button").click(function()
    { 
        $("div#vote_count").show().html('<h2>voting, please wait...</h2>');
    });
});

带有元素ID的JQuery

4 个答案: