Question

<strong class="comment" id="comment[6]">Show comments</strong> 
<div id="comments[6]">HERE GO COMMENTS</div>

我的JS档案：

$(document).ready(
    function() {
        $(".comment").click(
            function() {
            var id = $(this).attr("id").replace("comment", "comments");
            //document.getElementById(id).style.display = 'none';
            $('#' + id).hide();
            } );
        });

HTML代码是用PHP生成的，所以有很多数字div，每次点击显示/隐藏相应的div。但问题是，就Javascript而言（注释行）一切正常，但是当我尝试使用jQuery时没有任何反应。问题在哪里？

Answer 1

那是因为square brackets have special meaning within a jQuery selector。如果实际的id包含方括号，则需要使用反斜杠转义它们：

    var id = $(this).attr("id")
                    .replace("comment", "comments")
                    .replace(/(\[|])/g,"\\$1");

惊人的演示：http://jsfiddle.net/B3Hx9/

Answer 2

你需要使用\\

来逃避[]

Answer 3

$(document).ready(
    function() {
        $(".comment").click(
            function() {
            var id = $(this).attr("id","comments");
            //document.getElementById(id).style.display = 'none';
            $('#' + id).hide();
            } );
        });

Answer 4

方括号会丢弃您的id选择器，因为它们在这种情况下是特殊字符，允许您执行指定其他属性的操作。

虽然你可以逃脱它们，但你最好不要使用它们，例如将您的号码附加到带有下划线或其他字符的ID。添加正则表达式以解决问题并不是最佳的，因为在更改id本身的结构时会增加复杂性会使整个事情变得更简单。

<强> Example changed to use id_number format

<strong class="comment" id="comment_6">Show comments</strong> 
<div id="comments_6">HERE GO COMMENTS</div>

与JS函数不同，jQuery hide / show不起作用

4 个答案: