引導jQuery單擊事件

Question

我在每個圖像下面都有三個圖標，例如在新窗口中關閉打開並在彈出窗口中打開。

引導代碼：

    <div class="image-div">
     <div class="col-md-3"><img src="images/sample.jpg" id="1">
       <div class="bot-icon1 glyphicon glyphicon-remove" "=""></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt" "=""></div>
            <div class="bot-icon3 glyphicon glyphicon-globe" "=""></div> 
       </div>
       </div>

        <div class="image-div">
       <div class="col-md-3"><img src="images/sample-2.jpg">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>

       <div class="image-div">
       <div class="col-md-3"><img src="images/sample-2.jpg">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>

        <div class="image-div">
       <div class="col-md-3"><img src="images/sample-4.jpg">
       <div id="reload">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>


    <div class="image-div">
     <div class="col-md-3"><img src="images/sample.jpg">
       <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
       </div>
       </div>

       <div class="image-div">
       <div class="col-md-3"><img src="images/sample-2.jpg">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>

       <div class="image-div">
       <div class="col-md-3"><img src="images/sample-2.jpg">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>

        <div class="image-div">
       <div class="col-md-3"><img src="images/sample-4.jpg">
           <div class="bot-icon1 glyphicon glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>

      <div class="image-div">
       <div class="col-md-3"><img src="images/sample-5.jpg">
           <div class="bot-icon1  sample glyphicon-remove"></div>
          <div class="bot-icon2 glyphicon glyphicon-share-alt"></div>
            <div class="bot-icon3 glyphicon glyphicon-globe"></div> 
        </div>         </div>


</div>

JavaScript代碼：

    $(".bot-icon1").click(
        function() {
                $(this).siblings('img').css('display', 'none');
        });

         $( ".image-div" ).hover(
        function() {
        $(this).find( ".bot-icon1" ).css( "display", "block" );
        $(this).find( ".bot-icon2" ).css( "display", "block" );
        $(this).find( ".bot-icon3" ).css( "display", "block" );
                            }, function() {
        $(this).find(".bot-icon1" ).css( "display", "none" );
        $(this).find(".bot-icon2" ).css( "display", "none" );
        $(this).find (".bot-icon3" ).css( "display", "none" );
        }
    );

$(document).ready(function() {
        $('.image-div img').each(function() {
            var maxWidth = 250; // Max width for the image
            var maxHeight =250;    // Max height for the image
            var ratio = 0;  // Used for aspect ratio
            var width = $(this).width();    // Current image width
            var height = $(this).height();  // Current image height

            // Check if the current width is larger than the max
            if(width > maxWidth){
                ratio = maxWidth / width;   // get ratio for scaling image
                $(this).css("width", maxWidth); // Set new width
                $(this).css("height", height * ratio);  // Scale height based on ratio
                height = height * ratio;    // Reset height to match scaled image
                width = width * ratio;    // Reset width to match scaled image
            }

            // Check if current height is larger than max
            if(height > maxHeight){
                ratio = maxHeight / height; // get ratio for scaling image
                $(this).css("height", maxHeight);   // Set new height
                $(this).css("width", width * ratio);    // Scale width based on ratio
                width = width * ratio;    // Reset width to match scaled image
                height = height * ratio;    // Reset height to match scaled image
            }
        });
    });

我無法對三個圖標執行click操作。 我也想通過單擊第二個圖標在新窗口中打開來更改不同圖像的圖像src 。有人可以幫幫我嗎？

在bootply中清除視圖

http://www.bootply.com/8FXLlVxzPh#

Answer 1

$(".bot-icon2").click(function() {    
   $(this).siblings('img').attr("src","image.jpg");    
});