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

Question

我希望根据单击的图像在主 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>

如果图像有id="one"被点击，然后显示<div class="one">Brilliant</div>在描述分区内。然后，如果单击第二张图片，则在描述 div 中显示“ super ”div。我希望在单击之前不显示描述，并且一次只显示一个 div。

图像是表格的一部分，因为我需要转发 id 的值将图像上的变量。

这是执行此操作的脚本。

$('#images').delegate('img', 'click', function () {
    var $this = $(this);
    // Clear formatting
    $('#images img').removeClass('border-highlight');

    // Highlight with coloured border
    $this.addClass('border-highlight');

    // Changes the value of the form field prod to the file name shown in the image.
    $('[name="prod"]').val($this.attr('id').substring($this.attr('id').lastIndexOf('-') + 1));

    //Alert for debugging simplicity
    alert($('[name="prod"]').val());
});

也许可以在当前脚本中实现一个功能？

这是一个fiddle ，这一切都会使我目前拥有的整体变得有意义。

Answer 1

看看这个 fidde

你只需要添加:

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

在您的 onclick 函数的底部。

** 您在第 3 个 div 上有一个错字，其中包含文本(树而不是三个)。