Javascript 使用btn组切换图像集

我不想一次显示所有的图像，因为这会使页面设计混乱。我想点击一个按钮，在一个引导btn组和相应的图像显示。不是javascript/jquery的人，所以我需要一些帮助

  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-default">Front</button>
    <button type="button" class="btn btn-default">Back</button>
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Right</button>
  </div>

  <div class="front-product-img">
    <% front = @product['colors'][0]['images'].find{|img| img['label'] == 'Front'} %>
    <%= image_tag front['url'], class: 'img-responsive' if front.present? %>
  </div>

  <div class="back-product-img">
    <% back = @product['colors'][0]['images'].find{|img| img['label'] == 'Back'} %>
    <%= image_tag back['url'], class: 'img-responsive' if back.present? %>
  </div>

  <div class="left-product-img">
    <% left = @product['colors'][0]['images'].find{|img| img['label'] == 'Left'} %>
    <%= image_tag left['url'], class: 'img-responsive' if left.present? %>
  </div>

  <div class="right-product-img">
    <% right = @product['colors'][0]['images'].find{|img| img['label'] == 'Right'} %>
    <%= image_tag right['url'], class: 'img-responsive' if right.present? %>
  </div>

正面
返回
左边
赖特

根据您的要求使用上述代码

---

根据您的需求使用上述代码。

这不太正确，请关闭。我甚至无法描述它在做什么，因为每次我重新加载时它都会做一些不同的事情。首先，它显示页面加载上的所有图像。当我点击前面的btn时，它会显示回来，然后就不再显示img了。我希望我能更好地描述它，但我对它在做什么感到困惑。它不太正确，很接近。我甚至无法描述它在做什么，因为每次我重新加载时它都会做一些不同的事情。首先，它显示页面加载上的所有图像。当我点击前面的btn时，它会显示回来，然后就不再显示img了。我希望我能更好地描述它，但我对它在做什么感到困惑。

$(".btn-group[role='group'] button[type=button]").click(function() {
$("."+$(this).text().toLowerCase()+"-product-img").toggle();
});