複数の画像を複数のクリックで表示する

Question

div内に複数の画像を表示するにはどうすればよいですか？私は画像のライブラリを持っています&私はそれらをクリックすると、div内の画像を表示したい。

は、私はので、私はので、私は2回をクリックし3回犬に私は猫の画像を2回たい&をクリックして犬の画像を3回にしたいとしましょう。クリック時にこれを行うためのJavaスクリプトは何でしょうか？

2番目のドロップダウンで画像が表示されたら、もう1つ画像を消すことができますか？

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>

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