Question

我这里的代码是使用bootstrap实现的。这是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帖子上的建议。所以我在每个href元素中添加了<input>标记，稍后会链接到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>

根据单击引导程序更改文本

1 个答案: