jQuery replaceWith无法正确加载div

Question

我是jQuery的新手，但我希望在单击链接时将<div>替换为包含幻灯片的另一个<div> 。 但是，我的代码存在的问题是，当我单击链接时，要显示的<div>没有显示。 相反，我只看到例如div.slidesContainer 。

我的HTML：

<div id="leftText">
  <h2>Heading.</h2>
  <p>Text. <a href="/" id ="startSlide" %>'Learn more.'</a></p>
</div>
<div id="slide">
<div class="slides_container">
  <div>
    <h1>Slide heading.</h1>
      <p>Slide text.</p>
  </div>
</div>
</div>

我的jQuery：

$(function(){
    $("a#startSlide").click(function(){
        $('div#leftText').replaceWith('div#slide');
        return false;
    });
});

如果有帮助，请使用jsFiddle： http : //jsfiddle.net/HR43b/

Answer 1

您需要传递HTML或jQuery对象来替换： http ://api.jquery.com/replaceWith/

.replaceWith（newContent）

newContent要插入的内容。 可以是HTML字符串，DOM元素或jQuery对象。

.replaceWith（函数）

function一个函数，该函数返回用来替换匹配元素集的内容。

串：

$('div.inner').replaceWith('<h2>New heading</h2>');

宾语：

$('div.third').replaceWith($('.first'));

打回来：

$('div.container').replaceWith(function() {
  return $(this).contents();
});

Answer 2

您必须传递选择器，而不是字符串：

$(function() {
    $("a#startSlide").click(function() {
        $('div#leftText').replaceWith($('#slide'));

        $('#slide').css('visibility', 'visible');
        return false;
    });
});

演示： http : //jsfiddle.net/HR43b/3/

Answer 3

尝试这个。

$('div#leftText').replaceWith('<div id="slide"></div>');

要么

$('div#leftText').replaceWith($('div#slide'));

Answer 4

检查一下：

div#slide {
    visibility:hidden;
}

您的<div>已隐藏。在替换为其他内容之前，请将其行为更改为可见。 然后使用replaceWith

您更改的jsfiddle

 $(function(){
        $("a#startSlide").click(function(){
            $('div#slide').css('visibility','visible');
            $('div#leftText').replaceWith($('div#slide'));
            return false;
        });
    });