Question

我从JQuery开始，我试图创建一个简单的函数来定义是否单击，隐藏一个div并显示另一个div。

我的代码是：

jQuery(document).ready(function() {
  jQuery('#dots').on('click', function() {
    jQuery('#truncated_full_value').show();
  });
  jQuery('#dots').on('click', function() {
    jQuery('#text-before-truncate').hide();
  });
});

html是：

   <dd class="truncated">  
       <div class="text-before-truncate">   
         <a href="#" class="dots" onclick"return flase"> ... </a>  
       </div>

     <div class="truncated_full_value">   
       <dt>Opties</dt>  
     </div> 
   </dd>

我做错了什么？

Answer 1

您需要使用.作为类选择器

jQuery(document).ready(function() {
jQuery('.dots').on('click', function() {
    jQuery('.truncated_full_value').show();
    jQuery('.text-before-truncate').hide();
    });
});

#是一个id选择器。此外，您不需要将它们连接在两个单独的处理程序中。您可以将show / hide放在同一个处理程序中。

Answer 2

您可以将两者的事件处理程序组合在一起：

jQuery('.dots').on('click', function() {
    jQuery('.truncated_full_value').show();
    jQuery('.text-before-truncate').hide();
});

如果你想要toggle：

jQuery('.dots').on('click', function() {
    jQuery('.truncated_full_value, .text-before-truncate').toggle();
});

Answer 3

使用下面的代码。你不需要为同一个元素编写单独的事件。将两者结合为一个事件。

HTML中没有标识为dots的元素。您需要使用.类选择器，例如.dots

 jQuery(document).ready(function() {

   jQuery('.dots').on('click', function() {
     jQuery('#truncated_full_value').show();
     jQuery('#text-before-truncate').hide();
   });

});

Answer 4

你们都有类选择器使用“.”前缀而不是“#”

jQuery(document).ready(function() {
   jQuery('.dots').on('click', function() {
     if(jQuery('.truncated_full_value').is(':visible')){
      jQuery('.truncated_full_value').hide();
      jQuery('.text-before-truncate').show();
     }
     else{
      jQuery('.truncated_full_value').show();
      jQuery('.text-before-truncate').hide();
     }
   });
});

类功能单击显示/隐藏

4 个答案: