jQuery开放元素仅适用于当前父对象

时间：2018-07-09 13:49:25

标签： javascript jquery

我正在使用此jsFiddle。我唯一需要的是，当我单击ReadMore时，它将仅显示其父地图，而不显示其他地图。我该如何实现？我尝试了.each（）函数

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

但是我仍然找不到解决方法。

7 个答案:

答案 0 :(得分：2)

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

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

此处jsfiddle。

答案 1 :(得分：1)

由于.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>

答案 2 :(得分：1)

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

更新：解决了一个问题，使您单击的地图处于切换状态，而所有其他地图都被隐藏。

$('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>

答案 3 :(得分：0)

您的解决方案

    <!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>

答案 4 :(得分：0)

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

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

答案 5 :(得分：0)

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

$('article').each(function(i){
    $(this).find('a').click(function(){

            $(this).siblings().find(".map").toggle();
        });
});

答案 6 :(得分：-1)

为了清晰起见，将其分解为点击处理程序和事件创建器。 您遇到的问题是特定性之一，您需要确保缩小事件范围。下面是一个示例（使用箭头功能可以更清楚地了解我们正在访问的内容，而不是标准功能和“ 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>

相关问题
最新问题