Question

我是jQuery的新手，但我希望在点击链接时将<div>替换为包含幻灯片的另一个<div>。然而，我的代码问题是当我点击链接时，我想要加载的div.slidesContainer没有显示。相反，我只看到<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>为例。

我的HTML：

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

我的jQuery：

{{1}}

如果它有帮助，这里有一个jsFiddle：http://jsfiddle.net/HR43b/

Answer 1

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

.replaceWith（newContent）

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

.replaceWith（function）

functionA函数，返回用于替换集合的内容   匹配元素。

字符串：

$('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;
        });
    });

jQuery replaceWith没有正确加载div

4 个答案: