我做了一个函数来设置值和相应的图像上的复选框的检查。我已经使用淡入显示各自的图像。当我取消选中复选框时，我想淡出值和相应的图像。
我已经写了一些代码，但他们不工作，只有价值观是消失，而不是图像。
<!DOCTYPE html>
<html lang="en">
<head>
<title>onclick get images using array</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.main {
background-color: #5F9EA0;
}
.main1 {
background-color: #5F9EA0;
padding: 50px 30px;
}
.main h2 {
color: #ffff;
font-weight: bold;
}
.imageback {
background-color: #afcecf;
padding: 50px 0 50px 0;
}
button {
border: none;
border-radius: 5px;
background-color: #ffa333;
padding: 8px 25px;
font-weight: bold;
color: #ffff;
font-size: 18px;
margin: 15px 0;
}
.imagename1, .imagename2, .imagename3 {
display: none;
}
.imagename1 h4, .imagename2 h4, .imagename3 h4 {
color: #ffff;
font-weight: bold;
margin: 50px 0;
}
#mainimage1, #mainimage2, #mainimage3 {
cursor: pointer;
}
label {
color: #ffff;
font-weight: bold;
font-size: 16px;
}
.stylevaluee {
background-color: #5F9EA0;
padding: 50px 0px;
}
.stylevaluee li {
color: #ffff;
font-weight: bold;
font-size: 16px;
list-style-type: none;
margin: 5px 0;
}
</style>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 main">
<h2 class="text-center">OnClick make gallery using Multiple Arrays</h2>
</div>
</div>
</div>
</header>
<section class="imageback">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-2 main1">
<form name="myform1" action="/action_page.php">
<div class="checkbox">
<label><input type="checkbox" name="interior" value="Style the Sofa">Style the Sofa</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="interior" value="Style the Bed">Style the Bed</label>
</div>
<div class="checkbox">
<label><input type="checkbox" name="interior" value="Style the Kitchen">Style the Kitchen</label>
</div>
</form>
</div>
<div class="col-lg-8 imageback1">
<div class="imagemain1">
<div class="col-lg-2 imagename1">
<img id="myimage0" class="img-responsive" src="images/images1/sofa1.jpg">
<h4 id="head0" class="text-center">Two color sofa</h4>
</div>
<div class="col-lg-2 imagename1">
<img id="myimage1" class="img-responsive" src="images/images1/sofa2.jpg">
<h4 id="head1" class="text-center">Velvet italian style Sofa</h4>
</div>
<div class="col-lg-2 imagename1">
<img id="myimage2" class="img-responsive" src="images/images1/sofa3.jpg">
<h4 id="head2" class="text-center">White Sofa Modern</h4>
</div>
<div class="col-lg-2 imagename1">
<img id="myimage3" class="img-responsive" src="images/images1/sofa4.jpg">
<h4 id="head3" class="text-center">Yellow sofa Wallpaper</h4>
</div>
<div class="col-lg-2 imagename1">
<img id="myimage4" class="img-responsive" src="images/images1/sofa5.jpg">
<h4 id="head4" class="text-center">Pure leather sofa</h4>
</div>
<div class="col-lg-2 imagename1">
<img id="myimage5" class="img-responsive" src="images/images1/sofa6.jpg">
<h4 id="head5" class="text-center">White american style sofa</h4>
</div>
</div>
<div class="imagemain2">
<div class="col-lg-2 imagename2">
<img id="myimage0" class="img-responsive" src="images/images2/bed1.jpg">
<h4 id="head0" class="text-center">Brown color bed</h4>
</div>
<div class="col-lg-2 imagename2">
<img id="myimage1" class="img-responsive" src="images/images2/bed2.jpg">
<h4 id="head1" class="text-center">Italian style bed</h4>
</div>
<div class="col-lg-2 imagename2">
<img id="myimage2" class="img-responsive" src="images/images2/bed3.jpg">
<h4 id="head2" class="text-center">White/black color bed</h4>
</div>
<div class="col-lg-2 imagename2">
<img id="myimage3" class="img-responsive" src="images/images2/bed4.jpg">
<h4 id="head3" class="text-center">Red color bed</h4>
</div>
<div class="col-lg-2 imagename2">
<img id="myimage4" class="img-responsive" src="images/images2/bed5.jpg">
<h4 id="head4" class="text-center">Pure light green bed</h4>
</div>
<div class="col-lg-2 imagename2">
<img id="myimage5" class="img-responsive" src="images/images2/bed6.jpg">
<h4 id="head5" class="text-center">Milky color bed</h4>
</div>
</div>
<div class="imagemain3">
<div class="col-lg-2 imagename3">
<img id="myimage0" class="img-responsive" src="images/images3/kitchen1.jpg">
<h4 id="head0" class="text-center">Dark black pannels style</h4>
</div>
<div class="col-lg-2 imagename3">
<img id="myimage1" class="img-responsive" src="images/images3/kitchen2.jpg">
<h4 id="head1" class="text-center">Italian milky style</h4>
</div>
<div class="col-lg-2 imagename3">
<img id="myimage2" class="img-responsive" src="images/images3/kitchen3.jpg">
<h4 id="head2" class="text-center">light and dark green style</h4>
</div>
<div class="col-lg-2 imagename3">
<img id="myimage3" class="img-responsive" src="images/images3/kitchen4.jpg">
<h4 id="head3" class="text-center">Red and black pannels style</h4>
</div>
<div class="col-lg-2 imagename3">
<img id="myimage4" class="img-responsive" src="images/images3/kitchen5.jpg">
<h4 id="head4" class="text-center">Pure colorfull style</h4>
</div>
<div class="col-lg-2 imagename3">
<img id="myimage5" class="img-responsive" src="images/images3/kitchen6.jpg">
<h4 id="head5" class="text-center">Wooden style kitchen</h4>
</div>
</div>
</div>
<div class="col-lg-2">
<ul id="stylevalue" class="stylevaluee">
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function(){
$("[name=interior]").click(function (){
myFunction();
});
function myFunction() {
var total = "<ul>";
$("[name=interior]:checked").each(function(){
total += "<li>" + $(this).val() + "</li>";
alert($(this).val());
var imgg = $(this).val();
if (imgg == "Style the Sofa") {
$(".imagename1").fadeIn(1000);
}
else if ($(this).val() == "Style the Bed") {
$(".imagename2").fadeIn(500);
}
else if (imgg === "Style the Kitchen") {
$(".imagename3").fadeIn(500);
}
else if (imgg === "") {
$(".imagename1").fadeOut(1000);
$(".imagename2").fadeOut(1000);
$(".imagenamer").fadeOut(1000);
}
});
total += "</ul>";
$("#stylevalue").html(total);
}
});
</script>
</body>
</html>字符串
1条答案
按热度按时间b0zn9rqh1#
这就是你正在寻找的，在这里我们寻找复选框状态，然后添加淡入类。这是一个有点大的代码，但它肯定会帮助你。