Question

我正在研究一些前端功能。实际上我在进行que调用后正在进行Ajax请求和修改UI。

我使用不是唯一的ID来识别我的模型（前面）的相关项目/视图，因为我通过组合class + ID来选择不同的项目。

快速示例：

 <div id="23"class="status_ic btn btn-info">Status Name</div>
 <div class="botones_applies" id="23">
     <div class="btn btn-xs btn-primary btn-acept" id="23">
     Acept
     </div>
     <div class="btn btn-xs btn-borrar btn-danger btn-deny" id="23">
        Deny
    </div>
 </div>

我这样做：

 $('.botones_applies#23').empty();
 status_btn = $('.status_ic#23');
 status_btn.removeClass('btn-info');
 status_btn.addClass('btn-primary');
 status_btn.text('Acepted');

我使用这种选择器做了更多的视图没有任何问题，但在这里我遇到了奇怪的行为，我的第一个选择器不工作，而另一个选择器工作，他们使用相同的逻辑。我注意到，如果我将订单交换到$('#23.botones_applies')，它会按预期工作。我能做到这一点，因为不会破坏任何东西，但我担心为什么会这样。

 $('.botones_applies#23') ---> doesn't work
 $('#23.botones_applies') ---> works
 $('.status_ic#23') ---> works

我缺少一些css或jquery规则吗？也许是一些愚蠢的小事......也许我忘了一些重要的概念..有人会解释我这个吗？谢谢！

Answer 1

我缺少一些css或jquery规则吗？

HTML规则，是：id值必须在文档中是唯一的。

另外：虽然id值以数字开头有效，但CSS ID选择器不能，因此#23是无效的选择器。您需要转义（#\32 3，在字符串文字中需要"#\\32 3"）或属性选择器（[id="23"]）。

Answer 2

您没有唯一的ID，这是您的首要问题。

我是否还建议应用JS特定类而不是使用id。我喜欢用js-为它们添加前缀，以便将它们与用于样式的类别区分开来。这样做的好处是你可以有重复的类而不是id。

JQuery CSS选择器奇怪的行为，为什么？

2 个答案: