多個圖像正在點擊而不是一次顯示

Question

我一直無法讓這個工作每次我嘗試更改圖像多個圖像出現倍增我希望能夠一次顯示一個圖像和如果我想要我可以點擊圖像，以便圖像再次基本出現。此外，我想用拖動和可調整大小的每個圖像

$(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(); 
 
\t 
 
$('#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>

只是改變了影像在點擊顯示只是每次點擊一個

Answer 1

看來你如下做了一些不正確，

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

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

您應該只有一次綁定的事件。

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

請按照$('.subselector').on('change', function() { 方法中的代碼移動你。它因此多次綁定事件。

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

Answer 2

據我瞭解，你想上在您的#fotos容器內一次只顯示一張照片。對於這一點，簡單地改變.append()功能.html()，如：

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

這將替換的img內#fotos而不是插入另一個。