Javascript / Jquery - щелкнуть по открытой ячейке таблицы и закрыть ее при нажатии другой ячейки

Question

Я сейчас изучаю Javascript / Jquery и надеюсь получить помощь здесь! Хотелось бы редактировать только мой Javascript файл, а не HTML / CSS.

Таким образом, у меня 10 разных изображений (image1-10.png) в моей таблице, размещенных случайным образом , и это будет покрыто другим изображением (card.jpg). Я хочу, чтобы мой результат был таким: выбранная ячейка откроется, чтобы показать случайное изображение (image.png), и закроется (назад к изображению по умолчанию card.jpg) при нажатии на другую ячейку. Но мой текущий код откроет все ячейки, независимо от того, какую из них я нажму ..

HTML:

<table id="choices">
<tr>
<td><div class="choicesDiv" value=1></div></td>
<td><div class="choicesDiv" value=2></div></td>
<td><div class="choicesDiv" value=3></div></td>
<td><div class="choicesDiv" value=4></div></td>
<td><div class="choicesDiv" value=5></div></td>
</tr>
<tr>
<td><div class="choicesDiv" value=6></div></td>
<td><div class="choicesDiv" value=7></div></td>
<td><div class="choicesDiv" value=8></div></td>
<td><div class="choicesDiv" value=9></div></td>
<td><div class="choicesDiv" value=10></div></td>
</tr>
</table>

Javascript:

$(document).ready(function(){
    $(".choicesDiv").append("<img src='images/card.jpg' width='100%' height='100%' />" )

    var images= ['images/image1.png','images/image2.png','images/image3.png','images/image4.png','images/image5.png','images/image6.png','images/image7.png','images/image8.png','images/image9.png','images/image10.png'] 
    var randomArr = [] 
    for(var i= 0 ; i < images.length;i++){
        var item = images[Math.floor(Math.random() * images.length)]
        // this condition to prevent doublicate elements
            if(!randomArr.includes(item)){
                randomArr.push(item)
            }else{
                i = i - 1;
            }
        }

        $(".choicesDiv").click(function(){
            $("table#choices .choicesDiv").each(function(index, value){
                if(index > randomArr.length) {
                    $(this).html("<img src='images/card.jpg' />")
                }else{
                    $(this).html("<img src='"+randomArr[index]+"' />")
                }
            })

        })
});

Answer 1

Я обновил функцию щелчка, пожалуйста, проверьте

$(".choicesDiv").click(function(){
    $(this).html("<img src='images/card.jpg' />");
    $("table#choices .choicesDiv").not($(this)).each(function(index, value){
        $(this).html("<img src='"+randomArr[index]+"' />");
    });
});