jquery打开具有不同内容的多个覆盖

我不来了。如何为每个覆盖打开正确的内容？目前，他只邀请第二个容器

我的小提琴：

---

你必须区分两者。一种方法是使用ID

试试这个：- JS:-

 $(document).ready(function () {
     $('.open').click(function () {
         var clickedElement=this;
         $('.overlay').show('slow', function () {
             $(clickedElement).parent().find('.container').fadeIn('slow');

         });
     });
     $('.close').click(function () {
         $('.container').hide('slow', function () {
             $('.overlay').fadeOut();
         });
     });
 });

<ul class="row">
    <li> <a href="#" class="open">»Australien</a>

        <div class="container">
            <p> <a href="#" class="close">close</a>

            </p>
            <p class="changeText">Australien</p>
        </div>
    </li>
    <li> <a href="#" class="open">»Australien2</a>

        <div class="container">
            <p> <a href="#" class="close">close</a>

            </p>
            <p class="changeText">Australien2</p>
        </div>
    </li>
</ul>
<div class="overlay"></div>

HTML:-

 $(document).ready(function () {
     $('.open').click(function () {
         var clickedElement=this;
         $('.overlay').show('slow', function () {
             $(clickedElement).parent().find('.container').fadeIn('slow');

         });
     });
     $('.close').click(function () {
         $('.container').hide('slow', function () {
             $('.overlay').fadeOut();
         });
     });
 });

<ul class="row">
    <li> <a href="#" class="open">»Australien</a>

        <div class="container">
            <p> <a href="#" class="close">close</a>

            </p>
            <p class="changeText">Australien</p>
        </div>
    </li>
    <li> <a href="#" class="open">»Australien2</a>

        <div class="container">
            <p> <a href="#" class="close">close</a>

            </p>
            <p class="changeText">Australien2</p>
        </div>
    </li>
</ul>
<div class="overlay"></div>

澳大利亚语





澳大利亚2

您可以使用数据属性来区分容器。像这样：

html:

---

---

它也可以计算当前链接的索引，但它不是那么干净的阅读。

好的thx，但我有20个链接，js不会太大吗？“你不能做那种动态吗？”赫尔赛迪，是的。将公共部分抽象为一个函数，并将其传递给变量部分。

 <li> <a href="#" class="open" data-target='A1'>Australien</a></li>
 <div class="container A1">

$(document).ready(
    function() {
        $('.open').click(
            function() {
                var target=$(this).data('target');
                $('.overlay').show('slow',
                    function() {
                        $('.container.'+target).fadeIn('slow');

                    }
                );
            }
        );
         $('.close').click(
            function() {
                $(this).parents('.container').hide('slow',
                     function() {
                          $('.overlay').fadeOut();          
                     }    
                );
            }
        );  
    }
);