Javascript“getParent（）”无效

Question

我必须在span标记之上隐藏我的父<a>并在其下方显示span。（在<a>标记上点击它时）。

我需要使用getParent（），因为它们是另一个相同的<div>重复

我的HTML

<div class="Test">
  <p class="commentBody">
    <span class="view_more-comment">abcd...
      <a class="view_more_link" href="javascript:void(0);" onclick="$(this).getParent().getNext().style.display='';$(this).getParent().style.display='none';">more</a>
    </span>
    <span class="view_more" style="display: none;">abcdefghijklmnopqrstuvwzyz...
      <a class="view_less_link" onclick="$(this).getParent().getPrevious().style.display='';$(this).getParent().style.display='none';">less</a>
    </span>
  </p>
</div>

当我使用此console时显示错误

  

未捕获的TypeError：$（...）。getParent不是函数

解决这个问题的方法是什么？。

Answer 1

getParent()中没有jQuery。使用：

onclick="$(this).parent().prev().show(); $(this).parent().hide();"

Docs

  

获取当前匹配元素集中每个元素的父元素，可选择通过选择器进行过滤。

我建议您使用 on进行事件处理而不是内联处理程序

修改

使用jQuery：

$('.view_less_link').on('click', function() {
    $(this).closest('.commentBody').find('.view_more-comment').show();
    $(this).parent().hide();
});

Answer 2

使用.parent（）而不是getParent（）。

Answer 3

更新您的html，如下所示，并为这两个链接保留类似的课程

<强> DEMO

<span class="view_more-comment more">abcd...
     <a class="view_link " href="javascript:void(0);">more</a>
</span>
<span class="view_more less" style="display: none;">abcdefghijklmnopqrstuvwzyz...
     <a class="view_link" href="javascript:void(0);">less</a>
</span>

然后这个JS

$('.view_link').on('click',function(){
   $(this).parent().slideToggle(200); 
   $(this).parent().siblings().slideToggle(200); 
});