当前位置:  开发笔记 > 编程语言 > 正文

检测单击同一类中的哪个元素并显示div

如何解决《检测单击同一类中的哪个元素并显示div》经验,为你挑选了1个好方法。

$(document).on("click", ".add_comment", function() {		
	$('.text_area').show();		
});
.main_text
{
  width:260px;
  height:75px;
  background-color:#fff;
  border:1px solid #000;
  overflow:hidden;
}
.add_comment
{
  color:#05c;
  cursor:pointer;
}
.text_area
{
   position:relative;
   left:300px;
    top:-120px;
   display:none;  
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

您好,我想点击Add comment文字并显示class="text_area",但现在如果我点击Add comment显示所有textareas但我想检测点击的内容.

例如,如果我点击第二Add comment个textarea将显示

Ibrahim Khan.. 5

您可以使用next()如下的jQuery 方法.

$(document).on("click", ".add_comment", function() {		
	$(this).next('.text_area').show();		
});
.main_text
{
  width:260px;
  height:75px;
  background-color:#fff;
  border:1px solid #000;
  overflow:hidden;
}
.add_comment
{
  color:#05c;
  cursor:pointer;
}
.text_area
{
   position:relative;
   left:300px;
    top:-120px;
   display:none;  
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment



1> Ibrahim Khan..:

您可以使用next()如下的jQuery 方法.

$(document).on("click", ".add_comment", function() {		
	$(this).next('.text_area').show();		
});
.main_text
{
  width:260px;
  height:75px;
  background-color:#fff;
  border:1px solid #000;
  overflow:hidden;
}
.add_comment
{
  color:#05c;
  cursor:pointer;
}
.text_area
{
   position:relative;
   left:300px;
    top:-120px;
   display:none;  
}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Add comment

推荐阅读
pan2502851807
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有