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