取消选中复选框淡出相应的图像

问题描述 投票：-1回答：1

我已经完成了一项功能，可以在选中复选框时设置值和相应的图像。我已经使用fadeIn来显示各个图像。当我取消选中复选框时，我想淡出值和相应的图像。我已经写了一些代码，但是它们不起作用，只有值消失了而不是图像。请帮帮我。

<!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>
jquery
1个回答
0
投票

这就是您要研究的内容，这里我们寻找复选框状态，然后将fadeIn添加到该类中。这是一个很大的代码，但是绝对可以帮助您。

$(document).ready(function() {
    $("[name=interior]").click(myFunction);

    function myFunction() {
        var total = "<ul>";
        $("[name=interior]").each(function() {
            if ($(this).is(":checked")) {
                total += "<li>" + $(this).val() + "</li>";
                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 ($(this).is(":not(:checked)")) {
                var imgg = $(this).val();
                if (imgg == "Style the Sofa") {
                    $(".imagename1").fadeOut(500);
                } else if ($(this).val() == "Style the Bed") {
                    $(".imagename2").fadeOut(500);
                } else if (imgg === "Style the Kitchen") {
                    $(".imagename3").fadeOut(500);
                }
            }

        });
        total += "</ul>";
        $("#stylevalue").html(total);
    }
});
  .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;
    }
<!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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>


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



</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.