Question

如何在div中显示多个图像？我有一个图像库和我想在点击它们时显示div内的图像。

让我们说我想要狗图像3次，所以我点击狗3次＆amp;我希望猫图像2次，所以我点击2次。 java脚本在点击时执行此操作会是什么？

还有一件事，当第二个下拉列表显示图像时，如何让图像消失？

＆＃13;

var modal = document.getElementById('myModal');
var modalImg = document.getElementById("img01");

function clickedPhoto(src) {
  modalImg.src = src;
}



function fctCheck(imajes) {
  var elems = document.getElementsByName("subselector");
  for (var i = 0; i < elems.length; i++) {
    elems.item(i).style.display = "none";
  }
  document.getElementById(imajes).style.display = "block";
}
$('#dog').on('change', function() {
  $("#dogimges").css('display', (this.value == 'smalldog') ? 'block' : 'none');
});
$('#cat').on('change', function() {
  $("#catimges").css('display', (this.value == 'smallcat') ? 'block' : 'none');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myModal" class="modal">
  <img class="modal-content" id="img01">
</div>


<select id="images" onchange="fctCheck(this.value);">
  <option value="">Choose Image</option>
  <option value="dog">dog</option>
  <option value="cat">cat</option>
</select>


<select id="dog" name="subselector" style="display:none">
  <option value="">Choose an item</option>
  <option value="smalldog">small dog</option>

</select>

<select id="cat" name="subselector" style="display:none">
  <option value="">Choose an item</option>
  <option value="smallcat">small cat</option>

</select>


<div style='display:none;' id="dogimges">
  <div data-image="http://i.imgur.com/iXHPRVf.jpg">
    <img src="http://i.imgur.com/iXHPRVf.jpg" alt="Smiley face" width="55" height="55" onclick="clickedPhoto(this.src)">
  </div>
</div>


<div style='display:none;' id="catimges">
  <div data-image="http://i.imgur.com/BHoIzPj.jpg">
    <img src="http://i.imgur.com/BHoIzPj.jpg" alt="Smiley face" width="55" height="55" onclick="clickedPhoto(this.src)">
  </div>
</div>

＆＃13;

Answer 1

如果您已经在使用jQuery，那么请使用它的功能。几乎没有修改，看看你是否正在寻找。此代码可以进一步优化。

$(document).ready(function() {
  $('#images').change(function() {
    $('.subselector').hide();
    $('.smallimages').hide();
    $('#' + $(this).val()).show();
  });
  $('.subselector').on('change', function() {
    $('.smallimages').hide();
    var id = $(this).attr('id');
    var val = $(this).val();

    $("#" + id + "imges").css('display', 'block');
  });

  $('img').on('click', function() {
    var src = $(this).attr('src');
    $('#myModal').append('<img class="modal-content" src="' + src + '">');
  });
});

<div id="myModal" class="modal">
  <img class="modal-content" id="img01">
</div>


<select id="images">
  <option value="">Choose Image</option>
  <option value="dog">dog</option>
  <option value="cat">cat</option>
</select>


<select id="dog" name="subselector" class="subselector" style="display:none">
  <option value="">Choose an item</option>
  <option value="smalldog">small dog</option>
</select>

<select id="cat" name="subselector" class="subselector" style="display:none">
  <option value="">Choose an item</option>
  <option value="smallcat">small cat</option>
</select>


<div style='display:none;' id="dogimges" class="smallimages">
  <div data-image="http://i.imgur.com/iXHPRVf.jpg">
    <img src="http://i.imgur.com/iXHPRVf.jpg" alt="Smiley face" width="55" height="55">
  </div>
</div>


<div style='display:none;' id="catimges" class="smallimages">
  <div data-image="http://i.imgur.com/BHoIzPj.jpg">
    <img src="http://i.imgur.com/BHoIzPj.jpg" alt="Smiley face" width="55" height="55">
  </div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Answer 2

var clickedPhoto=(function(){
   var id=0;
   function fun(src) {

   var str=" <img class='modal-content' id='img"+id+"' src="+src+">";
   modal.innerHTML= modal.innerHTML+str;
   id+=1;
   }
   return fun;
})();

删除div id myModal

中的内容

多次单击显示多个图像

2 个答案: