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

【问题标题】：jquery 1.7.1 cannot select span by intersection of class and idjquery 1.7.1 无法通过类和 id 的交集选择跨度
【发布时间】：2013-03-23 11:11:31
【问题描述】：

我正在尝试按类和 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}}">☺</a>
                                    </span>
                                {% elif object.voted == -1 %}
                                    <span class="voteup2" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='voteup' id="vu{{object.obj_id}}">⬆</a>
                                    </span>
                                {% else %}
                                    <span class="voteup" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='voteup' id="vu{{object.obj_id}}">⬆</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}}">☹</a>
                                    </span>
                                {% elif object.voted == 1 %}
                                    <span class="votedown2" id= "{{object.obj_id}}">
                                        <a href='javascript:;' class='votedown' id="vd{{object.obj_id}}">⬇</a>
                                    </span>
                                {% else %}
                                  <span class="votedown" id= "{{object.obj_id}}">
                                    <a href='javascript:;' class='votedown' id="vd{{object.obj_id}}">⬇</a>
                                  </span>   
                                {% endif %} 
                            </span>
                        </span>

【问题讨论】：

您是否在复制id 属性？不要那样做，这不是有效的 HTML："There must not be multiple elements in a document that have the same id value.".
它“看起来”还不错（ID 问题是个问题），但如果您使用后处理 HTML（在模板替换等之后）会更容易判断。因为没有人可以只运行代码并查看发生了什么，并且显然/严格没有任何理由它不应该工作。一个jsfiddle将是一个奖励。除此之外，也许尝试仅按 ID 选择并查看选择器是否包含任何内容？同样根据定义，应该只有 1 个具有给定 ID 的项目，如果可以避免的话，其结果是……不完全可预测的。

标签： jquery

【解决方案1】：

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

【讨论】：