クリックブートストラップに基づいてテキストを変更する

Question

私はこのコードをここではブートストラップを使って実装しています。ここではHTMLです：

<div class="map-images"> 
      <img src="images/map/level0.png" title="image 1" alt="Ground floor" id="image1" class="image-toggle"/> 
      <img src="images/map/level1.png" title="image 2" alt="floor 1" id="image2" class="image-toggle" style="display:none;"/> 
      <img src="images/map/level2.png" title="image 3" alt="floor 2" id="image3" class="image-toggle" style="display:none;"/> 
      <img src="images/map/level3.png" title="image 4" alt="floor 3" id="image4" class="image-toggle" style="display:none;"/> 
     </div> 
     <div class="btn-group" data-toggle="buttons"> 
      <label class="btn btn-primary image-toggler" data-image-id="#image1" data-link="first"> 
       <input type="radio" name="options" id="option1" href="#lvl0-overview"> Ground Floor 
      </label> 
      <label class="btn btn-primary image-toggler" data-image-id="#image2" data-link="second"> 
       <input type="radio" name="options" id="option2" href="#lvl1-overview"> Floor 1 
      </label> 
      <label class="btn btn-primary image-toggler" data-image-id="#image3" data-link="third"> 
       <input type="radio" name="options" id="option3" href="#lvl2-overview"> Floor 2 
      </label> 
      <label class="btn btn-primary image-toggler" data-image-id="#image4" data-link="fourth"> 
       <input type="radio" name="options" id="option4" href="#lvl3-overview"> Floor 3 
      </label> 
     </div> 

これは、上記のコードのためのJavaScriptです：

である基本的には何をするか、選択するために、ボタンのクリックに基づいて示す画像を変更

<script type="text/javascript"> 
    $('.image-toggler').click(function(){ 
     $('.image-toggle').hide(); 
     $($(this).attr('data-image-id')).show(); 
    }); 
</script> 

ユーザはフロアマップを見ることができる。 私がしたいのは、ボタンの下にフロアの説明を生成するonclickオプションを追加することです。私は自分のコードに追加する必要があり、より何この

------------- 
| Floor  | 
| overview | <-image swapping here based on button click 
|   | 
|   | 
------------- 
button1 button2 button3 

-------------- 
| floor  | 
| description | <-Change divs based on the current floor. 
|    | 
|    | 
-------------- 

よう

何か？私は簡単なCSSを使用してそれを実装しようとしましたが、this投稿にあるアドバイスを実装しています。そこで、<input>要素にhrefタグを追加し、後でdivにリンクしました。しかし、私はそれを働かせることはできません。私は何が欠けていますか？

Answer 1

何のCSSが見えるように画像を防ぐことではないことを確認してください

（例えば、いくつかのvisibility:hiddenまたはopacity:0）

チェックこの実装（幅イベント委任）：

$(document).on('click', '.image-toggler', function() { 
 
    $('.image-toggle').hide(); 
 
    $($(this).attr('data-image-id')).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="map-images"> 
 
      <img src="images/map/level0.png" title="image 1" alt="Ground floor" id="image1" class="image-toggle"/> 
 
      <img src="images/map/level1.png" title="image 2" alt="floor 1" id="image2" class="image-toggle" style="display:none;"/> 
 
      <img src="images/map/level2.png" title="image 3" alt="floor 2" id="image3" class="image-toggle" style="display:none;"/> 
 
      <img src="images/map/level3.png" title="image 4" alt="floor 3" id="image4" class="image-toggle" style="display:none;"/> 
 
     </div> 
 
     <div class="btn-group" data-toggle="buttons"> 
 
      <label class="btn btn-primary image-toggler" data-image-id="#image1" data-link="first"> 
 
       <input type="radio" name="options" id="option1" href="#lvl0-overview"> Ground Floor 
 
      </label> 
 
      <label class="btn btn-primary image-toggler" data-image-id="#image2" data-link="second"> 
 
       <input type="radio" name="options" id="option2" href="#lvl1-overview"> Floor 1 
 
      </label> 
 
      <label class="btn btn-primary image-toggler" data-image-id="#image3" data-link="third"> 
 
       <input type="radio" name="options" id="option3" href="#lvl2-overview"> Floor 2 
 
      </label> 
 
      <label class="btn btn-primary image-toggler" data-image-id="#image4" data-link="fourth"> 
 
       <input type="radio" name="options" id="option4" href="#lvl3-overview"> Floor 3 
 
      </label> 
 
     </div>