jQuery open 元素仅适用于当前父级

Question

我正在使用这个jsFiddle。我唯一需要的是，当我单击ReadMore时，它将仅显示其父地图，而不会显示其他地图。我怎样才能做到这一点？我用 .each(( 函数试过了

$('article').each(function(i){
$(this).find('a').click(function(){
$('.map').toggle();
});
});

但我仍然找不到解决方案。

Answer 1

你不需要每个循环。您只需单击事件即可执行此任务。

$('.readmore').click(function(){
$(this).parents('article').find('.map').toggle();
});

这里 jsfiddle.

Answer 2

由于.map元素位于单击元素的父元素内部，因此您必须使用$(this).parent()来find()要查找的元素：

$('article').each(function(i){
$(this).find('a').click(function(){
$(this).parent().find('.map').toggle();
});
});

但是以下内容就足够了(无需迭代article(即可实现您正在尝试实现的目标：

$('a.readmore').click(function(){
$(this).parent().find('.map').toggle();
});

$('a.readmore').click(function(){
$(this).parent().find('.map').toggle();
});

.map{
display: none;
}
article{
border: 2px solid gray;
margin: 20px 0;
}
.text{
background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>

Answer 3

我稍微更改了一下您的代码。这将首先隐藏所有地图，然后显示地图属于当前单击。这样，在任何时候都只有一张地图可见。

更新：修复了一个问题，即您单击的地图被切换，所有其他地图都隐藏起来。

$('article').find('a').click(function(){
var thisMap = $(this).parents('article').find('.map');
$('article').find('.map').not(thisMap ).hide();
thisMap.toggle();
});

.map{
display: none;
}
article{
border: 2px solid gray;
margin: 20px 0;
}
.text{
background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>

Answer 4

您的解决方案

<!DOCTYPE html>
<html>
<head>
<title>Check the code</title>
<script type="text/javascript">
$('class').each(function(i){
$(this).find('a').click(function(){
$this('.map').toggle();
});
});
</script>
</head>
<body>
<div class="map">Map Location</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</body>
</html>

Answer 5

您不必使用.each函数。您可以使用此代码，因为您的.map元素不在单击的元素内：

$('article a').click(function () {
$(this).closest("article").find('.map').toggle();
});

Answer 6

看看jsfiddle链接和下面的代码 JSFIDDLE ： https://jsfiddle.net/kxgh1L9o/15/

$('article').each(function(i){
$(this).find('a').click(function(){
$(this).siblings().find(".map").toggle();
});
});

Answer 7

为了清楚起见，将其分解为单击处理程序和事件创建器。 您遇到的问题是特异性问题之一，您需要确保缩小活动范围。 下面是一个示例(使用箭头函数来清晰地了解我们正在访问的内容，而不是标准函数和"this"(。

1. 选择事件目标
2. 遍历 DOM 直到父元素 (<article />(
3. 在父级中查找类为.map的元素
4. 切换找到的类的可见性

const clickHandler =  event => {
$(event.target)    // get event target ('this' is often used in a non arrow function)
.parent()        // find parent of target element (article)
.find('.map')    // find class '.map' inside parent element
.toggle();       // toggle visibility
}
$('article').each((index, element) => {
$(element)
.find('a')                  // find anchor in article
.on('click', clickHandler); // on click trigger event
});

.map{
display: none;
}
article{
border: 2px solid gray;
margin: 20px 0;
}
.text{
background: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>
<article>
<content>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a ultricies eros, eu commodo nisi. Etiam malesuada augue velit, vel posuere nunc lobortis eu. 		Praesent suscipit ligula id ipsum consequat aliquet. Donec efficitur magna vel fringilla ornare. Quisque sed nisi ut diam sollicitudin iaculis. Nulla dignissim 		suscipit accumsan. Nulla condimentum lorem ac erat tristique, ut pharetra ligula feugiat. Phasellus non tellus elit.
</div>
<div class="map">
googlemap
</div>
</content>
<a class="readmore">Read More</a>
</article>