JavaScript使用切换插入html

Question

我有一个div，其中包含大量大尺寸的图片，而我使用JavaScript尝试将此HTML插入另一个带有切换的div

请运行代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我的问题是每次切换按钮时都会显示div 如何防止HTML插入两次？或者在切换时插入和移除？

为什么要插入切换？：div默认是隐藏的，只有当我想选择一些背景图像时才使用它。所以我觉得如果你每次加载所有这些大图像时页面速度真的很糟糕该页面，而不是javascript我想在切换上插入html。

Answer 1

你可以在点击之前和之后设置html，只需要切换，而不是每次都设置html。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您只想在点击时加载图片，那么只需在$(".bgcontainer").html(colocontainer);之后click移动e.preventDefault()行

Answer 2

您只需要先清除HTML： $(sele).html("");

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需使用.container检查length即可。检查更新后的代码段。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

  

或者您可以清空旧的.container div

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以查看＆＃39; .container＆＃39; div已存在于div＆＃39; .bgcontainer＆＃39;并插入，如果不存在。请在下面找到修改后的代码段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 5

您可以在插入之前.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 6

为什么不在点击功能之前加载内容，然后在点击功能内只切换该内容的可见性？这样，内容只会加载一次，而不是每次单击

＆＃13;

＆＃13;

    	    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)

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





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

＆＃13;

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

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

.bgcontainer {
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;