Javascript Jquery：如何通过单击相应的div来更改图像

基本上，我想要做的就是在div中包装4块内容，然后让每一块内容对应一个图像，并在单击div时更改图像。我知道这应该非常简单，但我对jquery的了解有限，主要依赖插件。如果可能的话，我不想将info div更改为link。谢谢

这是我当前的标记；利用基础网格

<div class="feature-one row clearfix">
    <div class="three columns">
        <span class="twelve columns activities-1">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
        <span class="twelve columns activities-2">
            <p class="marker"> Title of Service</p>
                <p>Longer description of services</p>
        </span>
    </div>

        <div class="six columns" >
            <img id="activities-1" src="screenshot.jpg"/>
            <img id="activities-2" src="screenshot.jpg"/>
            <img id="activities-3" src="screenshot.jpg"/>
        </div>

        <div class="three columns">
            <span class="twelve columns activities-3">
                <p class="marker"> Title of Service</p>
                    <p>Longer description of services</p>
            </span>
        </div>
</div>

工作小提琴

---

我已经向每个span元素添加了属性

id

，正如您在fiddle链接上看到的那样。

为什么不添加$（'img'）.hide（）；而不是每一个？嗯，这也可以做到，是的！最近我一直在使用

each（）

很多。谢谢你给我的帮助，我几乎到达了我想要的地方。。。

    $('.feature-one img').each( function() {
    $(this).hide().filter(":first-child").show();;
});
$('.feature-one span').on('hover click', function() {
    var sName = $(this).attr('id');
    $('img#' + sName).fadeIn(800);
    $('.feature-one img').not($('img#' + sName)).fadeOut(800);
}
);

$(document).ready( function() {
    $('img').hide();
    $('span').on('click', function() {
        var sName = $(this).attr('id');
        $('img#' + sName).toggle(800);
    });
});