Question

我是jQuery的新手，我正在尝试创建一款允许用户在10张图片列表中查看3张图片的游戏。当用户单击列表底部的按钮时，我想将选中的图像附加到单独的无序列表中（我已创建）。

<ul id="imageNinpputList">
        <li><image src="pics/hammer.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/hardhat.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/paintbrush.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/screw.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/screwdriver.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/shovel.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/vest.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/wrench.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/cone.jpg"><input type="checkbox" name="tool"></li>
        <li><image src="pics/flashlight.jpg"><input type="checkbox" name="tool"></li>
</ul>
</div>
      <button id="confirm">100% Sure!!!</button>
</div>

<div class="hidden" id="checkedImageContainer">
      <ul class="checkedImageList">
      </ul>                 
</div>

当$(#confirmed).clicked我想要追加每个被检查的li时，只有它的图像是孩子。

我之前的jquery只允许用户点击3个复选框......

$("input[type=checkbox]").click(function() {

  let maxCheckedNum = $("input[type=checkbox]:checked").length >= 3;     
  $("input[type=checkbox]").not(":checked").attr("disabled",maxCheckedNum);
});

Answer 1

只需循环选中已选中的复选框，找到同级img代码的HTML，然后将其附加到li ul checkedImageList

中

 $(#confirmed).click(function(){
   if($("input[type=checkbox]:checked").length == 3) {
     var img;
     $("input[type=checkbox]:checked").each(function(){
       img = $(this).closest('li').find('img').html();
       $('#checkedImageContainer .checkedImageList').append('<li>'+img+'</li>'); 
     });
     $('#checkedImageContainer').removeClass('hidden');
   }
   else {
     //validation for clicking atleast three images
   }
 });

Answer 2

在按钮上单击，获取具有该名称的所有输入复选框的列表，然后循环它以获取兄弟图像的src ..

$('#btnAppend').click(function() {

  $("input[name='tool']").each(function() {
    if ($(this).is(':checked')) {
      $('#secondList').append('<li><img src="' + $(this).parent('li').find('img').attr('src') + '"></li>');
    }
  });
});

检查这个小提琴

https://jsfiddle.net/z1ko8xL2/

Answer 3

只需克隆li并删除input元素和append：

＆＃13;

$('#confirm').click(function() {
  if ($("input[type=checkbox]:checked").length == 3) {
    $("#imageNinpputList li input").each(function() {
      if ($(this).is(':checked')) {
        var li = $(this).parent().clone();
        li.find('input').remove();
        $('#checkedImageContainer ul').append(li);
      }
    });
  } else {
    alert('Select 3 images !')
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="imageNinpputList">
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
    <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
  <li> <img src="http://via.placeholder.com/50x25"><input type="checkbox" name="tool"></li>
</ul>
<div>
  <button id="confirm">100% Sure!!!</button>
</div>
<hr>
<div class="hidden" id="checkedImageContainer">
  <ul class="checkedImageList">
  </ul>
</div>

＆＃13;

如果在单击另一个按钮时检查其兄弟元素（输入：复选框），如何附加列表项子元素（图像元素）？

3 个答案: