在点击时显示多个图像而不是一次显示一个

i have been having trouble getting this to work every time i try to change the image multiple images appear multiplied i want to be able to display one image at a time and if i want i can click the image so the image appears again basically. also i want to use draggable and resizable on each image

每次我尝试更改图像时,我一直无法使用此工作多个图像出现倍增我希望能够一次显示一个图像,如果我想我可以点击图像,使图像基本上再次出现。我也想在每张图片上使用draggable和resizable

$(document).ready(function() {
  $('#imajes').change(function() {
    $('.subselector').hide();
    $('.smallimages').hide();
    $('#' + $(this).val()).show();
  });
  $('.subselector').on('change', function() {
    $('.smallimages').hide();
    var id = $(this).attr('id');
    var val = $(this).val();
	
 $('#dog').on('change', function() {
  $("#lrgdogimges").css('display', (this.value == 'smalldog') ? 'block' : 'none');
});

 $('#dog').on('change', function() {
  $("#smdogimges").css('display', (this.value == 'largedog') ? 'block' : 'none');
});
  
 

  $('img').on('click', function() {
    var src = $(this).attr('src');
    $('#fotos').append('<img class="modal-content" src="' + src + '">');
});
});
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<div id="fotos" ><img class="modal-content" id="imgdisplay" /></div>


<select id="imajes">
  <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>
  <option value="largedog">Large 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="lrgdogimges" 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 data-image="https://torcdesign.com/shirts/lyellow.jpg">
    <img src="https://torcdesign.com/shirts/lyellow.jpg" alt="Smiley face" width="55" height="55">
  </div>
</div>
<div style='display:none;' id="smdogimges" class="smallimages">
  <div data-image="https://torcdesign.com/shirts/wlsblack.jpg">
    <img src="https://torcdesign.com/shirts/wlsblack.jpg" alt="Smiley face" width="55" height="55">
  </div>
  <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>

just changing the image being displayed at one click to just one per click

只需将一次点击显示的图像更改为每次点击一次即可

2 个解决方案

#1

It seems you have did something incorrect as follows,

看来你做了一些不正确的事情如下,

$('#dog').on('change', function() {
  $("#lrgdogimges").css('display', (this.value == 'smalldog') ? 'block' : 'none');
});

 $('#dog').on('change', function() {
  $("#smdogimges").css('display', (this.value == 'largedog') ? 'block' : 'none');
});

You should only bind an event once.

您应该只绑定一次事件。

$('#dog').on('change', function() {
  $("#lrgdogimges").css('display', (this.value == 'smalldog') ? 'block' : 'none');
  $("#smdogimges").css('display', (this.value == 'largedog') ? 'block' : 'none');
});

Please move you following code out of $('.subselector').on('change', function() { method. It is binding click event multiple times hence the issue.

请按照$('。subselector')。('change',function(){method。的代码移动你。它是绑定点击事件多次因此问题。

$('img').on('click', function() {
    $('#fotos').append('<img class="modal-content" src="' + $(this).attr('src')+ '">');
});

#2

As I understand it, you wish to display only one photo at a time inside your #fotos container. For that, simply change the .append() function to .html() like:

据我了解,您希望在#fotos容器中一次只显示一张照片。为此,只需将.append()函数更改为.html(),如:

$('img').on('click', function() {
    var src = $(this).attr('src');
    $('#fotos').html('<img class="modal-content" src="' + src + '">');
});

This will replace the img inside #fotos instead of inserting another one.

这将替换#fotos中的img而不是插入另一个。

#1