Class 函数点击 show/hide

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

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

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 中没有 ID 为 dots 的元素。您需要使用 . 一个 class 选择器，例如 .dots

 jQuery(document).ready(function() {

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

});

Answer 4

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

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

Class 函数点击 show/hide

Class function click show/hide

jquery

hide

show