函数hide(）、prev(）、show(）被组装以获得所需的结果，但无法理解其工作原理

Function hide() , prev() , show() are assembled to get required result but unable to understand its working?

本文关键字：结果 工作 show prev hide 函数      更新时间：2023-09-26

我有一个运行良好的脚本。脚本是：

var minimized_elements = $('.innovision-msg');
  var minimize_character_count = 100;    
  minimized_elements.each(function(){    
    var t = $(this).text();        
    if(t.length < minimize_character_count ) return;
    $(this).html(
      t.slice(0,minimize_character_count)+
      '<span>...</span>'+'<a href="#" class="read_more" style="color:#1a51c6;">Read more</a>'+
      '<span style="display:none;">'+ t.slice(minimize_character_count ,t.length)+ '<span>...</span>' +
     '<a href="#" class="read_less" style="color:#1a51c6;">Read less</a></span>'
    );  
  });
  $('a.read_more', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).hide().prev().hide();
    $(this).next().show();        
  });
  $('a.read_less', minimized_elements).click(function(event){
    event.preventDefault();
    $(this).parent().hide().prev().show().prev().show();    
  });

在这个脚本中，我无法理解代码的含义和用法：

$(this).parent().hide().prev().show().prev().show();

有人能解释这行代码的含义吗？

此外，当它设置var minimize_character_count＝250时；脚本不起作用。

$(this).parent().hide().prev().show().prev().show();

该行隐藏被单击的this元素中的parent元素（用于最小化）。隐藏父元素后，它转到（parent元素的）previous sibling并使其成为visible。它再次转到previous sibling（父元素的上一个同级元素）并使其可见。

基本上，jquery方法（在完成它们的工作后，无论是隐藏、显示还是遍历）都会返回对当前元素的引用，从而允许您以这种方式链接方法。

这基本上是chaining，它在返回的对象上工作

$(this).parent().hide().prev().show().prev().show();

$(this)指'a.read_less', minimized_elements

单击此元素，它将找到parent dom，并将其hide。

.prev()用于选择前一个元素。因此，它将选择上一个元素并显示它。再次使用prev()将选择前一个到前一个元素，并显示

方法链接是jQuery的一个不错的特性。大多数方法将返回调用它的对象，所以您可以调用同一链中的其他方法。

jQuery的另一个非常酷的方面是大多数方法返回一个jQuery对象，然后可以使用该对象调用另一个方法。这允许您执行命令链接可以对同一组元素执行多个方法，即真的很好，因为它省去了你和浏览器的查找相同的元素不止一次来源

相关文章：