与jquery显示隐藏单独的div

Question

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

我试图做的是当某个图标被点击时显示/隐藏某些消息。这是我的HTML：

$('.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"); 
}); 

我做的目的，是显示特定信息（例如，消息措施）时：

<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 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代码似乎不工作。我在这里做一个小错误？还是应该以完全不同的方式准备代码？

Answer 1

1：你只需要得到一个值，并将其转换为ID ..

第二：像@juvian提到$（ '输入[.pov_icon_small]'）是不是一个有效的选择

.pov_icon_small其股利不输入，所以你可以使用$('div.pov_icon_small')代替

4吨H：.pov_icon_small没有任何价值属性.. .pov_title_small和.pov_title_large那些具有价值属性

$(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() 
    }); 
}); 

Working Demo

，如果你需要从.pov_icon你有2种方式

控制它1st：将一个值属性放在.pov_icon_small/large中

2nd：可以用

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

和

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

Answer 2

即使世界两个问题，第一你的CSS选择器input[.pov_icon_small]无效。第二个是，您将点击功能附加到pov_icon_small，该功能没有足够的高度或宽度供用户点击。我已经调整了HTML，因此它将绑定到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小提琴：http://jsfiddle.net/h97fg75s/