Question

使用此stackoverflow thread中的一些代码，我正在尝试开发类似于web template上的内容滑块

这是我工作的jsfiddle。

点击链接显示内容;之前显示的内容在执行此操作之前已隐藏如果显示某些内容，可以通过单击手动隐藏它。

使用链接的ID（A，B等），我们获取要显示的内容（<div>）的ID。当显示一个元素时，它会被赋予类“elementEnabled”以便稍后识别它。

在我放入新内容之前，我希望隐藏的内容不受影响。我该如何有条不紊地做到这一点？我.delay()上的.show()是一个很好的方法吗？

是否有更优雅的方式（在jQuery中）系统地隐藏显示的内容，然后显示适当的内容？有没有比使用$.when().then(function(){})更好的方法？将这么多代码放在回调函数中（如下所示）是不错的做法，还是应该将代码的“show”部分拆分成单独的函数？

感谢您的任何建议。

HTML：

<div id="links">
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
</div>
<div id="wrap">
<div class="start-content" id="a">
content here
</div>    
<div class="content" id="b">
content here
</div>
</div>

这是javascript：

$("#links a").click(function() {

//  having to do this for the callback function below
var park_this = $(this);

//  which ID is currently shown?
id_enabled = $('.enabledElement').attr("id").replace('-link', '');           

//hide previously displayed content
$.when($('#' + id_enabled).stop().hide("slide", 
    { direction: "left" }, 400)).then( function(){ // callback 

// remove any instances of special class
$('.enabledElement').removeClass('enabledElement');

// add special class to clicked element 
park_this.addClass('enabledElement');

// using the link ID, get the ID of the content to show
var id = park_this.attr("id").replace('-link', ''); //matching id

//show what's clicked on
$('#' + id).stop().delay(initial_pause).show("slide", 
    { direction: "left" }, 1000 );    

});  // close when/then callback function

} // close "click" function

使用jQuery，使用$ .when（）来滑动内容div进出同一区域。然后（）

0 个答案: