javascript - 使用 btn-group 切换图像集

Question

我不想一次显示所有图像，因为它只会扰乱页面设计。我想单击 Bootstrap 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>

Answer 1

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

使用上面的代码来满足您的要求..