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());
});

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

这是一个fiddle，它将全部理解我目前的整体情况。

Answer 1

查看此fidde

你只需要添加：

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

在你的onclick功能的底部。

**你在第3个div上有一个拼写错误的文本（树而不是三个）。

Answer 2

您可以通过在divs中为描述添加div来简化操作，因为我认为无需在description div之外添加div以进行说明，然后再添加它。您需要hide我们在说明div和show中的所有div，以及与img被点击相关的div。

<强> Live Demo

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();
});

如何使用JavaScript显示div，具体取决于单击的图像

2 个答案: