结合两个显示两个隐藏的div的相似函数

Question

我是一个设计师，不时地尝试代码，真的只是做些小小的修改。

我有一些现有的代码，其工作方式如下：

• 短时间延迟后，页面上出现文本链接(类“one”)
• 当您单击该链接时，隐藏的div (类“overlayone”)将变得可见，并滑到显示内容。
• 当您单击角落中的X(类“close”)时，它会关闭div。

我需要在页面上添加第二个链接，名为“2”，它的功能相同，但打开一个不同的隐藏div (称为“overlay-2”)。不过，我不知道如何将其附加到现有代码中。目前的代码是：

$(document).ready(function() {
setTimeout(function() {
    $(".one").addClass("active"), $("img").trigger("unveil")
}, 1e3), $("a.one").on("click", function() {
    $(".overlayone").addClass("active")
}), $(".close").on("click", function() {
    setTimeout(function() {
        $(".overlayone").removeClass("active")
    }, 400), setTimeout(function() {
        $(".close").removeClass("is-active")
    }, 1e3)
})
});

Answer 1

我希望我明白你的意思：

$(document).ready(function() {

function setClassTimeout(class){
    setTimeout(function() {
        $("." + class).addClass("active"), $("img").trigger("unveil")
    }, 1e3), $("a." + class).on("click", function() {
        $(".overlay" + class).addClass("active")
    }), $(".close").on("click", function() {
    setTimeout(function() {
        $(".overlay" + class).removeClass("active")
    }, 400), setTimeout(function() {
        $(".close").removeClass("is-active")
    }, 1e3)
    })
}

var array = ['one', 'two', 'three'];
for(i = 0; i < array.length; i++)
{
    setClassTimeout(array[i]);
}

});

Answer 2

您的HTML是：

<div class="one"  > 
     <a href="#" class="one">One</a> 
</div> 


<div class="two"> 
    <a href="#" class="two">Two</a>     
</div> 

<div class="overlayone"> 
    <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
    <div class="content"> <p>Text content...One</p> </div>
</div> 
<div class="overlaytwo"> 
     <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
     <div class="content"> <p>Text content...Two</p> </div>
</div> 

您将需要修改您的html一点点。在下面找到代码，在代码中有变化的地方有代码注释。

​

$(document).ready(function() {
    // Added class to link having class "two"
	setTimeout(function() {
		$(".one").addClass("active");
		$(".two").addClass("active");
		$("img").trigger("unveil")
	}, 1e3); 
	
  /*When link is clicked  custom attribute value of that link is  taken and based on that "active" class is added to overlay div*/
	$("a.links").on("click", function() {
		$('.'+$(this).data('overlay')).addClass("active")
	});

	$(".close").on("click", function() {
	    var self = this;
		setTimeout(function() {
            // "Self" is clicked close  button and active class is removed  from parent of that button 
			$(self).parent().removeClass("active")
		}, 400);
		setTimeout(function() {
			$(self).removeClass("is-active")
		}, 1e3)
	});
});

.active{
	display : block !important;
}

.overlayone,
.overlaytwo{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Add one custom attribute in anchor tag . Value of that attribute will be corresponding div.Also add class "links" to anchor tag-->
<div class="one"  > 
	<a href="#" class="one links"  data-overlay="overlayone">One</a> 
</div> 

<!--Add one custom attribute in anchor tag . Value of that attribute will be corresponding  div. Also add class "links" to anchor tag-->
<div class="two"> 
	<a href="#" class="two links"  data-overlay="overlaytwo">Two</a>		
</div> 

<div class="overlayone"> 
	<button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
	<div class="content"> <p>Text content...One</p> </div>
</div>

<div class="overlaytwo"> 
    <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
	 <div class="content"> <p>Text content...Two</p> </div>
</div>

​

Answer 3

在这个答案中，我没有触及您在评论中提供的HTML代码。我刚换了js。确保隐藏和显示元素的方式不是冲突的here.This不是更好的解决方案，因为每次添加新链接时都必须维护js代码。我的第一个答案更好。

​

$(document).ready(function() {
  setTimeout(function() {
    $(".one,.two").addClass("active"),          
    $("img").trigger("unveil")
  }, 1e3),$("a.one,a.two").on("click", function(event) {
              if($(event.target).hasClass('one')){
                $(".overlayone").addClass("active");
	          }else{
			    $(".overlaytwo").addClass("active");
		      }
    }), $(".close").on("click", function(event) {
	       var self = this;	
           setTimeout(function() {	 
             $(self).parent().removeClass("active")
           }, 400), setTimeout(function() {
             $(self).removeClass("is-active")
          }, 1e3)
    })
});

.active{
  display : block !important;
}
	
.overlayone,
.overlaytwo,
a.one,
a.two{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="one"  > 
  <a href="#" class="one">One</a> 
</div> 

<div class="two"> 
  <a href="#" class="two" >Two</a>		
</div> 

<div class="overlayone"> 
  <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
  <div class="content"> <p>Text content...One</p> </div>
</div>

<div class="overlaytwo"> 
  <button class="c-hamburger c-hamburger--htx close"> <span>toggle menu</span> </button> 
  <div class="content"> <p>Text content...Two</p> </div>
</div>

​