javascript - 多次点击显示多张图片

Question

如何在一个 div 中显示多个图像？我有一个图像库，我想在单击它们时在 div 中显示图像。

假设我想要狗的图像 3 次，所以我点击了狗 3 次，我想要猫的图像 2 次，所以我点击了 2 次。单击时执行此操作的 java 脚本是什么？

还有一件事，当第二个下拉菜单显示图像时，我怎样才能使图像消失？

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');
});

<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>

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>