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;
        });
    });