javascript - 如何根据图像的点击隐藏/取消隐藏一组 div

Question

您好，提前感谢您的帮助。

我这里有工作代码:http://jsfiddle.net/wmbice/hy7xLv5f/2/它提供了根据从下拉菜单中选择水果来更改 div 可见性的能力。我希望能够使用相同的方法通过选择 3 张图片中的一张来确定可见性，而不是使用下拉菜单。

这是 HTML:

<div class="triggerAnimation animated" data-animate="fadeInDown">
        <h2>FRUIT AREA<br>
                   Apples - Oranges - Lemons</h2>

    <select size="1" id="reportsSelect">
        <option value="blank" onclick="show(this)">Blank Div</option>
        <option value="apples" onclick="show(this)">Apples</option>
        <option value="oranges" onclick="show(this)">Oranges</option>
        <option value="lemons" onclick="show(this)">Lemons</option>
    </select>
    <div id="blankDiv" style="display:none;"></div>
    <div id="applesDiv" style="display:none;">
         <h1>Apples</h1>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <div id="orangesDiv" style="display:none;">
         <h1>Oranges</h1>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
    <div id="lemonsDiv" style="display:none;">
         <h1>Lemons</h1>

        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    </div>
</div>
<!-- END .triggerAnimation, .animated, .col-sm-4 -->

...这是 Javascript:

$(function () {
    // Trigger hidden div   
    $.fn.showField = function () {
        var selectVal = document.getElementById(this.val() + 'Div');
        return this.each(function () {
            $(selectVal).show().siblings('div').hide();
        });
    };
    $('select#reportsSelect').change(function () {
        $(this).showField();
    });
});

如有任何建议，我们将不胜感激。谢谢!

Answer 1

您可以使用 jQuery .on 点击功能来做到这一点:

$('img').on('click', function(){
    var fruitType = $(this)[0].id
    var showDivId = "#" + fruitType + "Div";
    $(showDivId).show().siblings('div').hide();
});

<img id="apples" src="http://bit.ly/1AcfNNQ">
<img id="oranges" src="http://bit.ly/19MlpVy">
<img id="lemons" src="http://bit.ly/1vx8QCV">

当 img 元素上发生点击事件时，它将触发此函数 - 该函数查找元素的 id(水果名称)并调用 show 函数并隐藏其同级元素。

查看更新后的 jsbin here