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

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而不是插入另一个。