Question

我正在显示div id onclick，并且工作正常，那些div内有图像，我也想显示所选div的图像并将其保留在原始div中，但是当我尝试仅执行一个操作时图像被显示并从div中删除，我希望所有选定的div图像都像其ID一样进行切换，这是代码：

  let ids = [];
	$(".select").on("click", function () {
	    ids.indexOf(this.id) === -1 ? ids.push(this.id) : ids.splice(ids.indexOf(this.id), 1);
	    $(this).toggleClass('selected');
	    $('#selected-id').html(ids.join(", "));
	    $('.selected-imgs').html($(this).children('img'));      
	});

.select {
display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>

<p id="selected-id"></p>
<div class="selected-imgs"></div>

Answer 1

代码已更新： 您可以输入以下内容：

let ids = [];
  $(".select").on("click", function () {
  if (ids.indexOf(this.id) >= 0) { // logic to remove
   $(".selected-imgs").children("img").eq(ids.indexOf(this.id)).remove();
   ids.splice(ids.indexOf(this.id), 1);
   $('#selected-id').html(ids.join(", "));
   return;
  }
  // logic to add
  ids.push(this.id)
  $(this).toggleClass('selected');
  $('#selected-id').html(ids.join(", "));
  $(this).children('img').clone().appendTo('.selected-imgs'); //clone and append the image
	 
});

.select {
display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>

<p id="selected-id"></p>
<div class="selected-imgs"></div>

Answer 2

您需要将所选div的html附加到目标div。这是您可以执行的操作：

let ids = [];
	$(".select").on("click", function () {
      var src = $(this).children('img').attr('src');
      var i = 0;
	    ids.indexOf(this.id) === -1 ? ids.push(this.id) : ids.splice(ids.indexOf(this.id), 1);
	    $(this).toggleClass('selected');
	    $('#selected-id').html(ids.join(", "));
      $('.selected-imgs img').each(function (){
          if($(this).attr('src') === src)
          {
            $(this).remove();
            i += 1;
          }
      })
      if(i === 0)
      {
          $('.selected-imgs').append($(this).html()); 
      }
	         
	});

.select {
display: inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select" id="1">
<img src="https://images.pexels.com/photos/886465/pexels-photo-886465.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="2">
<img src="https://images.pexels.com/photos/872957/pexels-photo-872957.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" height="100">
</div>

<div class="select" id="3">
<img src="https://images.pexels.com/photos/669615/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" height="100">
</div>

<p id="selected-id"></p>
<div class="selected-imgs"></div>

在选定的div中显示图像

2 个答案: