Question

如何根据当时按下的正确按钮将一组图像更改为正确的位置。我找到了一个包含多个图像的单个按钮的示例，但无法弄清楚如何使用多个按钮将各种图像放在一个设定的位置。

例如，我有三个按钮，每个按钮在单击时会显示三个不同的图像，取代之前显示的按钮。

HTML：

<div class="container">
    <div class="row center-block" style="margin:20px auto;">
        <div class="col-md-2 center-block text-center">
            <button id="btnBasketball" class="btn btn-primary" onclick="basketballImg()">Basketball</button>
        </div>
        <div class="col-md-2 center-block text-center">
            <button id="btnFootball" class="btn btn-primary" onclick="footballImg()">Football</button>
        </div>
        <div class="col-md-2 center-block text-center">
            <button id="btnHockey" class="btn btn-primary" onclick="hockeyImg()">Hockey</button>
        </div>
    </div>
</div>

<div class="col-md-4">
    <center>
        <img id="img1" src="" class="img-rounded" alt="">
        <input type="button" onclick="pic1()"/>
    </center>
</div>
<div class="col-md-4">
    <center>
        <img id="img2" src="" class="img-rounded" alt="">
        <input type="button" onclick="pic2()"/>
    </center>
</div>
<div class="col-md-4">
    <center>
        <img id="img3" src="" class="img-rounded" alt="">
        <input type="button" onclick="pic3()"/>
    </center>
</div>

JAVASCRIPT：

<script>
function basketballImg(){
    picLocation1('img/bbImage1.png');
    picLocation2('img/bbImage2.png');
    picLocation3('img/bbImage3.png');
}

function footballImg(){
    picLocation1('img/fbImage1.png');
    picLocation2('img/fbImage2.png');
    picLocation3('img/fbImage3.png');
}

function hockeyImg(){
    picLocation1('img/hyImage1.png');
    picLocation2('img/hyImage2.png');
    picLocation3('img/hyImage3.png');
}
</script>

这样的脚本是选择图像组的最佳方法吗？我愿意接受任何建议！提前谢谢！

Answer 1

如果我理解正确，那么您正尝试根据按钮点击将图像更改为一组新图像。这是我能想到的最简单的方法，虽然这不是最有效的方法，但这应该有效

function basketballImg(){
document.getElementById('img1').href = 'img/bbImage1.png';
document.getElementById('img2').href = 'img/bbImage2.png';
document.getElementById('img3').href = 'img/bbImage3.png';

}

function footballImg(){
document.getElementById('img1').href = 'img/fbImage1.png';
document.getElementById('img2').href = 'img/fbImage2.png';
document.getElementById('img3').href = 'img/fbImage3.png';

}

function hockeyImg(){
document.getElementById('img1').href = 'img/hyImage1.png';
document.getElementById('img2').href = 'img/hyImage2.png';
document.getElementById('img3').href = 'img/hyImage3.png';

}

现在点击每个按钮，这些图像集将被那些图像替换。

使用引导程序在按钮单击上显示图像组

1 个答案: