js jq 点击a标签 显示对应的div

Posted 2023-03-25

<li><a href=' ' class=open>浏览</a>
<div id=log class=review>
<div class=close><a href=' ' class=close>Close</a></div><div class=text id=text>”texta1“</div></div></li>
<li><a href='j ' class=open>浏览</a>
<div id=log class=review>
<div class=close><a href=' ' class=close>Close</a></div><div class=text id=text>”texta2”</div></div></li>
怎么点击a标签的时候，自己跳出对应的弹窗<li>下的痰喘，
js的代码是
$(".open").on('click', function()
document.getElementById('log').style.display='block';
document.getElementById('fade').style.display='block'; );
$(".close").on('click', function()
document.getElementById('fade').style.display='none';
document.getElementById('body').style.overflow='auto';);)
js怎么修改成对应的，现在不管点那个a标签第一个弹窗内容”texta1“

首先，ID是具有唯一性的（ID就是身份证号码，每个人都不相同），如果同一页面存在多个相同的ID，那么按ID来选择元素将永远只能选到第一个。

其次，jq本身有很方便的显示和隐藏元素的方法，可以直接使用。

下面是个例子，自己参考下：

<style>
.review display:none
</style>
<li>
   <a href='#' class=open>浏览</a>
   <div class=review>
      <div>
         <a href='#' class=close>Close</a>
      </div>
      <div class=text>texta1</div>
   </div>
</li>
<li>
   <a href='#' class=open>浏览</a>
   <div class=review>
      <div>
         <a href='#' class=close>Close</a>
      </div>
      <div class=text>texta2</div>
   </div>
</li>
<script>
$(function()
   $(".open").on("click",function()
      $(".review",$(this).parents("li")).show();
   );
   $(".close").on("click",function()
      $(".review",$(this).parents("li")).hide();
   );
);
</script>

参考技术A 我没看到代码里有fade和body的id。大概照着你的样子写了下点击事件。顺便说下，id是唯一性的，同一页面最好不要有多个一样的id。
$(".open").on('click', function()
$(this).find('#log').show();
$(this).find('#fade').show();
);
$(".close").on('click', function()
$(this).parents('li').find('#fade').hide();
$('#body').css('overflow','auto');
);追问

是在li外面的一个代码，是显示背景的，与li没有管理，通用，同body性质一样，
$(".admin_essay_review_open").on('click', function()
$(this).parents('tbody').find('#log').show();
$('#fade').show();
);
修改后测试$('#fade').show();有效；$(this).parents('tbody').find('#log').show();无效

追答

$(this).find('#log').show();

高分!!!!JS,JQ冒泡事件

假设，我现在做了一个<div>,这个div里面我设置了一个onClink事件,问题是,我的div里面有一个<a>标签,a标签有一张图片,图片是有一个链接,让你点击以后打开新窗口去到另外一个页面的.

现在的问题是,我想点击a标签的图片时候,打开新窗口去到另外一个页面,而在这张图片位置上不触发,div的onClink事件.

不要在div上绑定点击事件，在a连接上绑定点击事件，阻止事件冒泡就行了啊。
$("a").bind("click",function(event)

event.stopPropagation();
)追问

直接在a标签上面调用?div不做任何处理吗?div的onclick事件不能去掉哦.

追答

你是点击div的时候处超链接外有另外的处理流程？？
那你就绑定在div上，看其触发事件的原始元素是哪个，按触发事件的原始元素来分别处理
$("div").bind("click",function(event)
var element = event.target;
if(element.tagName == 'DIV')

else if(element.tagName == 'A')

)

参考技术A 楼上两位代码冗余了，需要两次绑定

这样做，一次绑定就OK了：

$("#div").click(function(e)
if($(e.target).is("IMG")) //or e.target.nodeName=="IMG"
window.open(url)
func("div")
);追问

你这个方法现在哪里呢?a标签那里吗?还有if($(e.target).is("IMG")) //or e.target.nodeName=="IMG"
这句是怎么理解的?

追答

我的意思是，
click事件是由不同DOM触发，只要判断是谁触发的，就可以分而治之，懂？

参考技术B 给a标签绑定一个事件，阻止其时间进行冒泡到父级的div上，就不会触发父级的onClick事件了
代码，同楼上追问

直接在a标签上面调用?div不做任何处理吗?div的onclick事件不能去掉哦.

追答

是的，直接给a加事件就好，不用去掉div上的onClick事件