Javascript 使用Jquery显示和隐藏单独的div

由于我在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\u small value=“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代码的消息似乎不起作用。我是不是犯了个小错误？或者我应该以完全不同的方式准备代码吗？

1st:您只需获取一个值并将其转换为id即可

2nd:like@juvian提到的$（'input[.pov\u icon\u small]）不是有效的选择器

3rd

.pov\u icon\u small

它是一个div而不是一个输入，因此您可以使用

$（'div.pov\u icon\u small'）

4th:

.pov\u icon\u small

没有任何值属性

.pov\u title\u small

和

.pov\u title\u large

具有value属性的

$(document).ready(function(){
  $('div.pov_title_small , div.pov_title_large').click(function(){
    var ThisValue = $.trim($(this).attr('value'));
    $(".pov_description").not("#"+ThisValue).hide();
    $("#"+ThisValue).slideToggle()
  });
});

如果需要从.pov_图标进行控制，有两种方法

1st:在.pov\u图标中放置一个值属性\u小/大

2nd:您可以使用

$('div.pov_icon_small , div.pov_icon_large').click

及

---

有两个问题，首先，您的CSS选择器

输入[.pov\u icon\u small]

无效。第二个问题是，您正在将单击功能附加到

pov_icon_small

，该图标没有足够的高度或宽度供用户单击。我已经调整了HTML，因此它将绑定到

pov\u title\u small

类

您需要将单击功能附加到具有值的项，然后将该值作为选择器传递。对于

pov\u title\u small

我已将属性

value

更改为

data value

，然后单击函数使用该属性选择要显示的ID。代码如下：

HTML:

您可以看到它在这个JS小提琴中工作：

$（'input[.pov\u icon\u small]'）不是有效的选择器

$('div.pov_icon_small , div.pov_icon_large').click

var ThisValue = $.trim($(this).next('div[class^="pov_title_"]').attr('value'));

<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>

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