jquery打开具有不同内容的多个叠加层

Question

我没有来。如何为每个叠加打开正确的内容？目前他只邀请第二个容器。

我的小提琴：http://jsfiddle.net/XNpN5/3/

 $('.open').click(
            function() {
                $('.overlay').show('slow',
                    function() {
                        $('.container').fadeIn('slow');

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

Answer 1

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

JSFiddle

 $(document).ready(
    function() {
        $('#open1').click(
            function() {
                $('.overlay').show('slow',
                    function() {
                        $('#overlay1').fadeIn('slow');

                    }
                );
            }
        );
        $('#open2').click(
            function() {
                $('.overlay').show('slow',
                    function() {
                        $('#overlay2').fadeIn('slow');

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

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/XNpN5/7/

<强> 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();
         });
     });
 });

<强> HTML： -

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

Answer 3

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

HTML：

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

JS：

$(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();          
                     }    
                );
            }
        );  
    }
);

http://jsfiddle.net/oceog/XNpN5/5/

---

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