单击某个链接以显示图像集合中的特定图像？

Question

我的JQuery体验有限。非常感谢任何帮助。

我有一个包含5个列表项的无序列表。我有五张图片，我希望根据点击的列表项显示不同的图像。

示例：你今天吃了多少苹果？选择1 2 3 4或5.单击数字5将显示5个苹果的图像。

每张图片都会在同一张图片中显示，替换上一张图片。

选择需要在整个用户体验中“连续”。 I.E用户需要能够根据自己的喜好选择1 2 3 4 5。

我想象链接5 If，Else语句效率不高？

这是否需要循环功能？

非常感谢

Answer 1

最原始的是使用索引，如果你是肯定的，每个列表元素按顺序对应于所需的图像。

示例：  http://jsfiddle.net/w1xafnkg/

<强> HTML：

<ul id="list">
    <li>1 apple</li>
    <li>2 apple</li>
    <li>3 apple</li>
    <li>4 apple</li>
    <li>5 apple</li>
</ul>

<div id="images">
    <img />
    <img />
    <img />
    <img />
    <img />
</div>

<强>脚本：

var lastShown;
$('#list').on('click', 'li', function() {
    var index = $(this).index();

    if (lastShown)
        lastShown.hide();

    lastShown = $('#images img:eq(' + index + ')')
    lastShown.show();
});

关于你的第二个问题：

示例： http://jsfiddle.net/w1xafnkg/1/

<强>脚本

    function initListToImageBind(defaultIndex) {
        var lastShown;
        if (!isNaN(defaultIndex)) {
            lastShown = $('#images img:eq(' + defaultIndex + ')').show();
        }

        $('#list').on('click', 'li', function () {
            var index = $(this).index();
            if (lastShown) lastShown.hide();
            lastShown = $('#images img:eq(' + index + ')')
            lastShown.show();
        });
    }

    /* invoking the function defined with the desired index number of image to 
be shown by default */
    initListToImageBind(4);

请记住索引从0开始，所以让我们说你想要默认显示第三张图片然后索引将是2 !!!