Question

所以我想要完成的是一个简单的appendTo某个元素。我遇到的问题是在执行run之后，它会附加到该位置，然后继续返回它所在的ul。

<script type="text/javascript">
    function execute() {
      $('#desCopy').appendTo('#description')
      $('#imgPlace').appendTo('#IMGbox')
    }
</script>

<div id="content" style="background:#000; width:989px;">
    <div style="float:left; left:18px; margin:0; width:337px; position:relative; padding:15px 0 0 0; color:#FFF;">
        <div id="description">
        </div>
    </div>

    <div
      id="IMGbox"
      style="float:left; position:relative; display:block; background:#F00; width:652px; height:258px; background:#0FF; overflow:hidden;">
    </div>

    <div style="float:right; background:#CCC; height:25px; width:652px;">
        <ul>
            <li><a href="" onclick="execute()">Slide 1</a>
                <ul style="">
                    <li><span id="desCopy">Test description, Test description</span></li>
                    <li><img src="images/test.jpg" id="imgPlace"></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 1

更改事件处理程序设置，如下所示：

<a href="" onclick="execute(); return false">

更好的是，使用jQuery进行设置并让处理程序返回false：

// somewhere in your initialization code:
$(function() {
  $('#theAnchorTag').click(function() {
    $('#desCopy').appendTo('#description');
    $('#imgPlace').appendTo('#IMGbox');
    return false;
  });
});

你必须给你的<a>一个“id”值（在我的例子中为“theAnchorTag”），或者你可以在设置了“click”处理程序的选择器中以其他方式识别它。你最好用jQuery绑定事件处理程序;那些“onfoo”属性非常狡猾。

Answer 2

您必须从执行中返回false以防止事件冒泡。

Answer 3

问题是空的href（就像您的链接一样）会在点击时重新加载页面。

所以你重新安排了你的li元素，然后重新加载页面，将所有内容恢复到最初的状态..

如其他答案中所述，您需要通过从处理程序返回false来取消默认点击操作。

您还应该使用jquery而不是内联属性来分配处理程序。

jQuery appendTo（来回切换）

3 个答案: