jquery - jquery 1.7.1 无法通过类和 id 的交集选择跨度

Question

我正在尝试按类和 id 选择向下投票箭头。所以看来我可以选择第一次尝试： $("span#"+obj_id+".voteup").removeClass('voteup').addClass('votedup');

但我无法选择第二次尝试： $("span#"+obj_id+".votedown").removeClass('votedown').addClass('votedown2');

代码粘贴在下面：

jQuery

    $(function(){
        $("body").on("click","span.voteup", 
            function(){
                obj_id = $(this).attr('id');
                var theint = parseInt($("span#votesum"+obj_id).html());
                theint++;     
                $("a#vu"+obj_id).html('☺');
                $("a#vd"+obj_id).html('⬇');
                $("span#"+obj_id+".voteup").removeClass('voteup').addClass('votedup');
                $("span#"+obj_id+".votedown").removeClass('votedown').addClass('votedown2');   
                $("span#votesum"+obj_id).html(theint);                                               
                $.post(
                    '/vote/',
                    {'obj_id': obj_id, 'vote': 1}
                );              
            }
        );
    });

html

                            <span class="no_decoration">
                                {% if object.voted == 1 %}
                                    <span class="votedup" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='voteup' id="vu{{object.obj_id}}">☺&lt;/a>
                                    </span>
                                {% elif object.voted == -1 %}
                                    <span class="voteup2" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='voteup' id="vu{{object.obj_id}}">⬆&lt;/a>
                                    </span>
                                {% else %}
                                    <span class="voteup" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='voteup' id="vu{{object.obj_id}}">⬆&lt;/a>
                                    </span>
                                {% endif %}
                            </span>
                            <br>
                            <span style="color:black;">
                                &nbsp;<span id="votesum{{object.obj_id}}">{{object.votesum}}</span>
                            </span>
                            <br>
                            <span class="no_decoration">
                                {% if object.voted == -1 %}
                                    <span class="voteddown" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='votedown' id="vd{{object.obj_id}}">☹&lt;/a>
                                    </span>
                                {% elif object.voted == 1 %}
                                    <span class="votedown2" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='votedown' id="vd{{object.obj_id}}">⬇&lt;/a>
                                    </span>
                                {% else %}
                                  <span class="votedown" id= "{{object.obj_id}}">
                                    <a href='javascript:;' class='votedown' id="vd{{object.obj_id}}">⬇&lt;/a>
                                  </span>   
                                {% endif %} 
                            </span>
                        </span>

Answer 1

一个 ID 只能在一个页面上使用一次。jQuery 可能总是找到 ID 的第一个实例，这就是为什么第二次尝试（添加 votedown 类）没有找到任何东西的原因。