如何根据图片的点击隐藏/取消隐藏一组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

您可以更改隐藏的div的触发器，如本小提琴所示。 我创建了三个虚拟div来代替图像，每个虚拟div都有一个data属性，用于显示应显示的隐藏div。 我还向您的隐藏div添加了一个名为details的类，以便jQuery可以轻松选择它们。

具体细节可能有所不同，但是使用此设置，代码很简单：

$(function () {
    // Trigger hidden div - Services    
    $('.likeimage').click(function() {
        var $this = $(this);
        var type = $this.attr('data-div');
        // Hide the previous
        $('.details').hide();
        $('#' + type + 'Div').show();
    });
});

Answer 2

您可以通过使用jQuery .on click函数来做到这一点：

$('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元素上发生click事件时，它将触发此函数-该函数查找元素的ID（水果名称）并调用show函数并隐藏其同级对象。

在这里查看更新的jsbin