Получить значение флажка и соответствующие изображения - PullRequest
Новая
       1

Получить значение флажка и соответствующие изображения

0 голосов
/ 26 января 2020

Я написал функцию для установки значения флажка, и соответствующие изображения, такие как при установке одного флажка, отображают некоторые изображения, а при проверке другого флажка - другие изображения. И при проверке всех флажков все соответствующие изображения будут отображаться. Я получаю ошибку в этой функции. Пожалуйста, помогите мне. 

<!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 pix = $(".imageback1 > div")
  var total = "<ul>";
    $("[name=interior]:checked").each(function(){
        total += "<li>" + $(this).val() + "</li>";
    });

    total += "</ul>";
    alert(total);
    $("#stylevalue").html(total);

    if (total = "Style the Sofa") {
        $(".imagename1").fadeIn(1000);
    }

    else (total = "Style the Bed") {
        $(".imagename2").fadeIn(1000);
    }

    else (total = "Style the Kitchen") {
        $(".imagename3").fadeIn(1000);
    }
}
});
</script>


</body>
</html>

1 Ответ

0 голосов
/ 26 января 2020

У вас много syntax ошибка ! , если вы хотите использовать равные, вы должны использовать == или ===, а не =, одиночные средства define также в вашем состоянии if и else if совершенно неверно, вы использовали две else не else if и более unexpected ошибки, проверьте это ниже фрагмент: 

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

  function myFunction() {
    var pix = $(".imageback1 > div")
    var total = "<ul>";
    $("[name=interior]:checked").each(function() {
      total += "<li>" + $(this).val() + "</li>";
      alert($(this).val())
      if ($(this).val() == "Style the Sofa") {
        $(".imagename1").fadeIn(1000);
      } else if ($(this).val() == "Style the Bed") {
        $(".imagename2").fadeIn(1000);
      } else if ($(this).val() == "Style the Kitchen") {
        $(".imagename3").fadeIn(1000);
      }
    });

    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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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" alt="1sas" 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>

Также для выполнения работы, которую вы задаете в своем вопросе, вам нужно переместить ваше состояние в loop и сравнить $(this).val не total

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...