2016-01-20 50 views
-1

如何使用next和prev在每個具有不同功能的JQUERY上使用hide and show做div。我希望也是最後一次是Finish沒有恢復到第一個div具有不同功能的多個顯示/隱藏div

這是的jsfiddle

http://jsfiddle.net/hsJbu/854/

我想第1頁上按的下一個我加載阿賈克斯,但不知道在哪裏使用該功能,然後在第2頁,不同的功能,但在我的jsfiddle這是相同的所有

EDIT1

添加代碼在這樣的點擊處理程序

var funs = [ 
    function() { 
    console.log('1 function'); 
    }, 
    function() { 
    console.log('2 function'); 
    } 
]; 

,並調用這個函數:由普利文

$(document).ready(function(){ 
    $(".divs div").each(function(e) { 
     if (e != 0) 
      $(this).hide(); 
    }); 

    $("#next").click(function(){ 
     if ($(".divs div:visible").next().length != 0) 
      $(".divs div:visible").next().show().prev().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:first").show(); 
     } 
     return false; 
    }); 

    $("#prev").click(function(){ 
     if ($(".divs div:visible").prev().length != 0) 
      $(".divs div:visible").prev().show().next().hide(); 
     else { 
      $(".divs div:visible").hide(); 
      $(".divs div:last").show(); 
     } 
     return false; 
    }); 
}); 

// I WANT TO CALL THESE 
function page1() 
{ 
    alert('page1'); 
    //call my function on page1 
} 

function page2() 
{ 
    alert('new function'); 
} 

HTML

<div class="divs"> 
    <div class="cls1">1</div> 
    <div class="cls2">2</div> 
    <div class="cls3">3</div> 
    <div class="cls4">4</div> 
</div> 
<a id="next">next</a> 
<a id="prev">prev</a> 
+3

添加代碼。不要繞過驗證。 –

+0

是的,發佈的代碼,它的JSFIDDLE已經 –

+4

**在帖子中添加代碼。** –

回答

0

可以在陣列保存功能,這樣

var i = $(".divs div:visible").index(); 
funs[i] && funs[i](); 

if (typeof funs[i] == 'function') { 
    funs[i](); 
} 

或不喜歡的數組:在後

if (i == 0) { 
    page1(); 
} else if (i == 1) { 
    page2(); 
} 
+0

你能解釋我是什麼?對不起,我只是新手'funs [i] && funs [i]();' –

+0

@StormSpirit它檢查'funs [i]'是否有值(函數),然後如果是這樣,從funs數組中執行函數。我添加了不同的片段。 – jcubic