jquery - 将变量与 .insertAfter 一起使用不起作用

Question

我是一个初学者，我的英语很糟糕，所以我在前面道歉。我有以下 CSS:

#wrapper{
    width: 200px;
    height: 300px;
    border: solid 1px #000; 
    overflow: visible;
    white-space: nowrap;
}
.page{
    display: inline-block;
    margin-right: -4px;
    width: 200px;
    height: 300px;
}
#page1{
    background-color: #CF9; 
}
#page2{
    background-color: #FC9;
}
#page3{
    background-color: #99F;
}
h1{
    color: white;   
}

HTML:

<div id="wrapper">
<div class="page" id="page1"><h1>page1</h1>
<ul>
<li><a href="#page1">page 1</a></li>
<li><a href="#page2">page 2</a></li>
<li><a href="#page3">page 3</a></li>
</ul>
</div>
<div class="page" id="page2"><h1>page1</h1>
<ul>
<li><a href="#page1">page 1</a></li>
<li><a href="#page2">page 2</a></li>
<li><a href="#page3">page 3</a></li>
</ul>
</div>
<div class="page" id="page3"><h1>page1</h1>
<ul>
<li><a href="#page1">page 1</a></li>
<li><a href="#page2">page 2</a></li>
<li><a href="#page3">page 3</a></li>
</ul>
</div>
</div>

和 Jquery:

$( document ).ready(function() {
    $(".page a").click(function(){
        fromURL=$(this).closest(".page").attr("id");
        toURL = $(this).attr("href");
        $(toURL).insertAfter(fromURL);
        //$("#page3").insertAfter("#page1"); //this works
        })


    });

似乎 .insertAfter 不适用于变量。我怎样才能做到这一点？

Answer 1

fromURL 是一个没有散列符号的 ID，所以它看起来像 jQuery 的元素名称，所以它不会选择任何东西。您可以将其设为 ID 选择器:

$(toURL).insertAfter("#" + fromURL);

但无论如何你都有这个元素。谁需要身份证？

var page = $(this).closest(".page");
var toURL = $(this).attr("href");
$(toURL).insertAfter(page);

顺便声明一下你的变量。隐式全局是不好的。严格模式和 JSHint 可以帮助解决这个问题。