Получить значение и изображение отмеченного флажка в jquery - PullRequest
Новая
       1

Получить значение и изображение отмеченного флажка в jquery

2 голосов
/ 25 января 2020

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

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

  function myFunction() {
    var total = "<ul>";
    $("[name=coffee]:checked").each(function() {
      total += "<li>" + $(this).val() + "</li>";
      $(this + '.imagename1').fadeIn(2000);
    });

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

  }
});
.imagename1,
.imagename2,
.imagename3 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>

  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>
<div class="imagename1">
  <img id="myimage0" class="" src="images/images1/sofa1.jpg">
  <h4 id="head0" class="">Two color sofa</h4>
</div>
<div class="imagename2">
  <img id="myimage0" class="" src="images/images2/bed1.jpg">
  <h4 id="head0" class="">Brown color bed</h4>
</div>
<div class="imagename3">
  <img id="myimage0" class="" src="images/images3/kitchen1.jpg">
  <h4 id="head0" class="">Dark black pannels style</h4>
</div>

Ответы [ 2 ]

2 голосов
/ 25 января 2020

Используйте порядковый номер для определения позиции:

  • Назначьте jQuery коллекцию <img>. Лучше всего ссылаться на тег, который обернут вокруг каждого <img>, например <figure>

    var pix = $('.gallery .pic');

  • .each() Первый параметр функции обратного вызова метода - index

    $('.coffee').each(function(index) {...

  • Используйте метод .eq(), чтобы указать, какой .pic обнаружен 

    pix.eq(index).fadeIn()

Кстати, никогда не используйте #id более одного раза, это очень недействительно.

Демо 

$("form").on('change', 'input', orderCoffee);

function orderCoffee(e) {
  var sub = $('.inputs .sub');
  var sum = $('.total');
  var pix = $('.gallery .pic');

  var bal = 0;
  var per = Number($('.quantity').data('base'));
  var qty = Number($('.quantity').val());

  sub.eq(0).val('$' + (per * qty).toFixed(2));

  $('.coffee').each(function(index) {
    var prc = Number($(this).val());
    if ($(this).is(':checked')) {
      sub.eq(index + 1).text('$' + (prc * qty).toFixed(2));
      pix.eq(index).fadeIn();
      bal += prc * qty;
    } else {
      sub.eq(index + 1).text('');
      pix.eq(index).fadeOut();
    }
  });

  bal += per * qty;
  sum.val('$' + bal.toFixed(2));
};
:root,
body {
  font: 400 3vw/6vh Arial
}

input {
  font: inherit
}

.gallery {
  display: flex
}

.pic {
  display: none;
  margin: 3px
}

figcaption {
  text-align: center;
  width: 120px
}

img {
  display: block;
  width: 120px
}

.quantity {
  width: 6ch
}

.sub,
label {
  display: inline-block;
}

label {
  width: 30%
}

.total {
  border-top: 3px solid #000;
  margin-top: 3px;
}

.sub,
.total {
  font-family: Consolas
}
<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
</head>

<body>
  <form>

    <fieldset class='inputs'>
      <legend>How would you like your coffee?</legend>
      <label>Quantity: <input name='quantity' class='quantity' type='number' min='1' max='99' value='1' data-base='5.50'>  </label><output class='sub'></output><br>
      <label><input type="checkbox" name="coffee" class='coffee' value=".25"> Cream </label><output class='sub'></output><br>
      <label><input type="checkbox" name="coffee" class='coffee' value=".15"> Sugar </label><output class='sub'></output><br>
      <label><input type="checkbox" name="coffee" class='coffee' value="1"> Milk </label><output class='sub'></output><br>
      <label><input type="checkbox" name="coffee" class='coffee' value="1.25"> Tea </label><output class='sub'></output><br>
      <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Total </label><output class='total'></output>
    </fieldset>

    <hr>
    <section class='gallery'>
      <figure class='pic'>
        <img src="https://images.pexels.com/photos/414720/pexels-photo-414720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
        <figcaption>Cup of Coffee</figcaption>
      </figure>
      <figure class='pic'>
        <img src="https://cdn.cnn.com/cnnnext/dam/assets/150929101049-black-coffee-stock-super-tease.jpg">
        <figcaption>Another Cup of Coffee</figcaption>
      </figure>
      <figure class='pic'>
        <img src="https://nb.bbend.net/media/news/2019/11/13/1029120/main/Coffee.png">
        <figcaption>Yet Another Cup of Coffee</figcaption>
      </figure>
      <figure class='pic'>
        <img src="https://i.insider.com/5d9357d42e22af5a784d5e96?width=1100&format=jpeg&auto=webp">
        <figcaption>Surprise! It's a Velociraptor!</figcaption>
      </figure>
    </section>
    <hr>
    <input class="order" name='order' type="text" size="50" value='WTH is this for?'>
    <input type="submit" value='Order'>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>
0 голосов
/ 25 января 2020

Используйте какой-либо атрибут каждого <input>, чтобы определить, какой <image> выбран. В этом примере я использовал value, но вы могли бы дать им class или id, или data-attribute. 

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

  function myFunction() {
    var total = "<ul>";
    $("[name=coffee]:checked").each(function() {
      total += "<li>" + $(this).val() + "</li>";
      $('.imagename' + $(this).val()).fadeIn(2000);
    });

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

  }
});
.imagename1,
.imagename2,
.imagename3 {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>How would you like your monkey?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="1">Blind<br>
  <input type="checkbox" name="coffee" value="2">Deaf<br>
  <input type="checkbox" name="coffee" value="3">Dumb<br>
  <br>

  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>
<div class="imagename1">
  <img id="myimage0" class="" src="https://files.catbox.moe/6t05n6.jpg">
  <h4 id="head0" class="">See no evil</h4>
</div>
<div class="imagename2">
  <img id="myimage0" class="" src="https://files.catbox.moe/4cn99n.jpg">
  <h4 id="head0" class="">Hear no evil</h4>
</div>
<div class="imagename3">
  <img id="myimage0" class="" src="https://files.catbox.moe/w06btk.jpg">
  <h4 id="head0" class="">Speak no evil</h4>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...