如何根据单击的图像使用JavaScript显示div

我希望在主div中显示某些div，具体取决于单击的图像。由于对Js或Jquery没有足够的了解，我无法在没有帮助的情况下做到这一点

<form>
    <input type="hidden" name="prod">
    <div id="images">
        <img id="one" src="http://lorempixel.com/200/200/">
        <img id="two" src="http://lorempixel.com/201/200/ ">
        <img id="three" src="http://lorempixel.com/203/200/ ">
        <img id="four" src="http://lorempixel.com/204/200/ ">
    </div>
</form>     
<div id="description">
</div>

<div class="one">Brilliant</div>
<div class="two">Super</div>
<div class="tree">Amazing</div>
<div class="four">Excellent</div>

也许可以在当前脚本中实现一个函数

---

这是一个例子，它将使我现在作为一个整体的意义

您可以通过在

div

中添加

div

来简化，因为我认为没有必要将用于描述的div放在

description

div之外，然后再添加它。您需要

隐藏
我们在description
div
中的所有div，并
显示
与单击的
img
相关的div


Html

看看这个

您只需添加：

$('#description').html($('.' + $this.attr('id')).html());

在onclick函数的底部

**第三个div中有一个文本输入错误（树而不是三个）。
DOM中不能有重复的ID。用一个类来代替。我真傻，很好的观点，谢谢你，刚刚编辑了它！：）使用原始javascript@Givi的解决方案不幸的是，这不是我想要的结果，但感谢您的贡献。我发现这个答案也正确，但是，我接受了Eugen的答案，因为他的版本保留了我当前的脚本，这对我的需要至关重要。
<input type="hidden" name="prod">
<div id="images">
    <img id="imgone" src="http://lorempixel.com/200/200" />
    <img id="imgtwo" src="http://lorempixel.com/201/200" />
    <img id="imgthree" src="http://lorempixel.com/203/200" />
    <img id="imgfour" src="http://lorempixel.com/204/200" />
</div>
<div id="description">
    <div id="one">Brilliant</div>
    <div id="two">Super</div>
    <div id="three">Amazing</div>
    <div id="four">Excellent</div>
</div>

$('#images').delegate('img', 'click', function () {
    $('#description div').hide();
    $('#' + this.id.replace('img', '')).show();
});

$('#description').html($('.' + $this.attr('id')).html());