javascript - 使用 jQuery 显示隐藏单独的 div

Question

由于我在 jQuery 方面缺乏经验，我发现最简单的任务很困难。

我尝试做的是在单击某个图标时显示/隐藏某些消息。这是我的 HTML:

<div class="container">
    <div class="row">
        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_small" value="measure">
                <i class="fa fa-clock-o"></i>
            </div>
            <div class="pov_title_small">
                MEASURE
            </div>
        </div>

        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_large" value="locate">
                <i class="fa fa-map-marker"></i>
            </div>
            <div class="pov_title_large">
                LOCATE
            </div>
        </div>

        <div class ="col-md-2 pov_icon">
            <div class="pov_icon_small" value="inform">
                <i class="fa fa-commenting"></i>
            </div>
            <div class="pov_title_small">
                INFORM
            </div>
        </div>

        <div id="measure" style="display:none" class="pov_description">
            <p> Message MESSAGE</p>
        </div>
        <div id="locate" class="pov_description">
            <p> Message LOCATE</p>
        </div>
        <div id="inform" style="display:none" class="pov_description">
            <p> Message INFORM</p>
        </div>

    </div>
</div>

我更改 pov icon/title 类的 JavaScript 代码有效，目前在此处:

$('.pov_icon_small , .pov_icon_large').on('click', function () {
    $('.pov_icon_large').not($(this)).removeClass('pov_icon_large').addClass('pov_icon_small');
    $('.pov_title_large').not($(this).next('div[class^="pov_title_"]')).removeClass('pov_title_large').addClass('pov_title_small'); 
    $(this).toggleClass("pov_icon_small").toggleClass("pov_icon_large");
    $(this).next('div[class^="pov_title_"]').toggleClass("pov_title_small").toggleClass("pov_title_large");
});

我的目标是在单击某个图标 pov_icon_small value="measure" 时显示特定消息(例如 Message Measure)，同时隐藏其他图标。当用户点击另一个图标时；将显示相应的消息，而其他消息将被隐藏:

$(document).ready(function(){
    $('input[.pov_icon_small]').click(function(){
        if($(this).attr("value")=="measure"){
            $(".pov_description").not("#measure").hide();
            $("#measure").show();
        }
        if($(this).attr("value")=="locate"){
            $(".pov_description").not("#locate").hide();
            $("#locate").show();
        }
        if($(this).attr("value")=="inform"){
            $(".pov_description").not("#inform").hide();
            $("#inform").show();
        }
    });

消息链接 JS 代码似乎不起作用。我在这里犯了一个小错误吗？还是我应该以完全不同的方式准备代码？

Answer 1

有两个问题，首先是您的 CSS 选择器 input[.pov_icon_small] 无效。第二个是您将点击功能附加到 pov_icon_small，它没有足够的高度或宽度供用户点击。我调整了 HTML，因此它绑定(bind)到 pov_title_small 类。

您需要将点击功能附加到具有值的元素，然后将该值作为选择器传递。对于 pov_title_small，我已将属性 value 更改为 data-value，然后点击函数使用它来选择要显示的 ID。这是代码:

HTML:

<div class="container">
<div class="row">
<div class ="col-md-2 pov_icon">
 <div class="pov_icon_small">
  <i class="fa fa-clock-o"></i>
 </div>
 <div class="pov_title_small" data-value="measure">
   MEASURE
 </div>
</div>

<div class ="col-md-2 pov_icon">
 <div class="pov_icon_large">
  <i class="fa fa-map-marker"></i>
 </div>
 <div class="pov_title_large" data-value="locate">
   LOCATE
 </div>
</div>

<div class ="col-md-2 pov_icon">
 <div class="pov_icon_small">
  <i class="fa fa-commenting"></i>
 </div>
 <div class="pov_title_small" data-value="inform">
   INFORM
 </div>
</div>

<div id="measure" style="display:none" class="pov_description">
 <p> Message MESSAGE</p>
</div>
<div id="locate" style="display: none;" class="pov_description">
 <p> Message LOCATE</p>
</div>
<div id="inform" style="display:none" class="pov_description">
 <p> Message INFORM</p>
</div>

Javascript:

$(document).ready(function(){
    $('[data-value]').bind('click', function(){
        $('.pov_description').hide();
        $('#'+$(this).attr('data-value')).show();
    });
});

您可以在这个 JS Fiddle 中看到它的工作:http://jsfiddle.net/h97fg75s/