的JavaScript插入HTML與切換

Question

我有一個div裏面含有大量的大尺寸圖像，並用JavaScript我想插入這個HTML在另一個div與切換

請運行該代碼片段

$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 

 

 
    var sele = document.querySelector(".bgcontainer"); 
 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    sele.insertAdjacentHTML('beforeend', colocontainer) 
 

 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>

我的問題是，div使得每次切換按鈕
如何防止HTML插入兩次？或者插入並刪除切換？

爲什麼插入切換？：該div是默認隱藏的，這隻用於如果我想選擇一些背景圖像，所以我覺得它真的很糟糕的頁面速度，如果所有這些大圖像渲染每次你加載頁面，而不是JavaScript我想插入切換HTML。

Answer 1

你只需要與先清除下來的HTML： $(sele).html("");

$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 

 

 
    var sele = document.querySelector(".bgcontainer"); 
 
    $(sele).html(""); 
 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    sele.insertAdjacentHTML('beforeend', colocontainer) 
 

 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>

Answer 2

您可以在插入之前.empty()它：

$(".toggleimages").on("click", function(e) { 
    e.preventDefault(); 

    var sele = document.querySelector(".bgcontainer"); 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>'; 

    $(sele).empty(); 
    sele.insertAdjacentHTML('beforeend', colocontainer); 
    $(sele).slideToggle(); 
}); 

Answer 3

可以使用簡單的檢查.containerlength。檢查更新的代碼片段。

$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 
    if(!$(".bgcontainer .container").length){ 
 

 
    var sele = document.querySelector(".bgcontainer"); 
 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    sele.insertAdjacentHTML('beforeend', colocontainer) 
 
} 
 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>

，或者你可以清空老.container格

$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 
    
 
$(".bgcontainer").empty(); 
 
    var sele = document.querySelector(".bgcontainer"); 
 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    sele.insertAdjacentHTML('beforeend', colocontainer) 
 

 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>

Answer 4

您可以設置HTML中前後點擊可以切換而不是每次都設置html。

var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    $(".bgcontainer").html(colocontainer); 
 

 
$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 

 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>

如果你想加載上點擊圖像纔剛剛搬進click$(".bgcontainer").html(colocontainer);行之後e.preventDefault()

Answer 5

你爲什麼不加載點擊功能之前的內容，然後點擊功能內只能切換該內容的可見性？通過這種方式，內容將只加載一次，而不是每次點擊

 \t  var sele = document.querySelector(".bgcontainer"); 
 
    \t  var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    \t  sele.insertAdjacentHTML('beforeend', colocontainer) 
 

 
    \t  $(".toggleimages").on("click", function(e) { 
 
    \t  e.preventDefault(); 
 

 

 

 

 

 
    \t  $(".bgcontainer").slideToggle(); 
 
    \t  });

li { 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 

 
.bgcontainer { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i>x</li> 
 

 
<div class="bgcontainer"></div>

Answer 6

您可以檢查「.container」 DIV是否已經存在在div「.bgcontainer」和插入如果不存在。請在下面找到

$(".toggleimages").on("click", function(e) { 
 
    e.preventDefault(); 
 
    
 

 
    var sele = document.querySelector(".bgcontainer"); 
 
    var colocontainer = '<div class=container><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_destiny_2_02_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span> </span><span class=bgImage><span style="background-image:url(https://www.gamewallpapers.com/img_script/wallpaper_dir/img.php?src=wallpaper_skull_and_bones_01_2560x1440.jpg&height=450&width=800&fill-to-fit)"></span></span></div>' 
 
    if(document.getElementsByClassName('container') && document.getElementsByClassName('container').length ==0) 
 
    sele.insertAdjacentHTML('beforeend', colocontainer) 
 

 
    $(".bgcontainer").slideToggle(); 
 
});

li{ 
 
    list-style-type: none; 
 
    font-size: 35px; 
 
    cursor: pointer; 
 
} 
 
span{ 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 140px; 
 
    background-size: cover; 
 
} 
 
.bgcontainer{ 
 
\t display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="toggleimages"><i class="fa fa-picture-o" aria-hidden="true"></i></li> 
 

 
<div class="bgcontainer"></div>