如何根據單擊的圖像使用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內顯示<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());
});

也許可以在當前腳本中實現一個功能？

這是一個小提琴 ，這一切都將使我目前擁有的一切變得有意義。

Answer 1

看看這個朋友

您只需要添加：

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

在onclick函數的底部。

**您在第3個div上有文本（樹而不是三個）的錯字。

Answer 2

你可以把它有點簡單通過增加divs用於描述div ，因為我認為沒有必要放的div對於外界描述description DIV后來添加。 您將需要hide描述div所有的div並show與被單擊的img相關的一個。

現場演示

HTML

<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>

使用Javascript

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