javascript - 使用 Bootstrap 在按钮单击时显示图像组

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';

}

现在，单击每个按钮时，这些图像集将被现有的图像替换。