jquery在兩個視圖之間切換

Question

我得到了兩個ID爲today和tomorrow的div。由於只有其中一個可以顯示，我寫了一個JavaScript函數在這兩個之間切換。

function switchDay(selector) { 
    if (selector == "tomorrow") { 
     $("#today").hide(); 
     $("#tomorrow").show(); 
     $("#daySelector").html('<a href="#" onclick="return switchDay(\'today\');">this day</a> | next day'); 

    } 
    if (selector == "today") { 
     $("#tomorrow").hide(); 
     $("#today").show(); 
     $("#daySelector").html('this day | <a href="#" onclick="return switchDay(\'tomorrow\');">next day</a>'); 

    } 
    return false; 
} 

在我的PHP我附和交換機鏈路是這樣的：

echo '<p id="daySelector">today | <a href="#" onclick="return switchDay(\'tomorrow\');">tomorrow</a></p>'; 

正如你所看到的，我已經切換的hide（）和show（）jQuery的功能（以前我是用.style .display函數），並且現在想要還舊的onclick，而是使用jquery .click()。雖然，我不知道我將如何改變切換鏈接。

我怎樣才能做到這一點？ （最好是，如果它沒有讓我的腳本變得太大...）

Answer 1

有很多方法來解決這個問題（上帝，我喜歡編程因爲這個）。

一個簡單的人會做到這一點：

$('#daySelector a').live('click', function() { 
    if ($(this).hasClass("tomorrow")) { 
     $("#today").hide(); 
     $("#tomorrow").show(); 
     $("#daySelector").html('<a href="#" class="today">this day</a> | next day');  
    } 
    if ($(this).hasClass("today")) { 
     $("#tomorrow").hide(); 
     $("#today").show(); 
     $("#daySelector").html('this day | <a href="#" class="tomorrow">next day</a>'); 

    } 
    return false; 
}); 

然後，只需做PHP這樣的：

echo '<p id="daySelector">today | <a href="#" class="tomorrow">tomorrow</a></p>'; 

我沒有測試它。應該仍然有效。

下面的評論讓我想起了現在被棄用的評論。以下是如何使用.on方法。我也編輯過，避免使用文檔進行綁定。

$('#daySelector').on('click', 'a', function() { 
    if ($(this).hasClass("tomorrow")) { 
     $("#today").hide(); 
     $("#tomorrow").show(); 
     $("#daySelector").html('<a href="#" class="today">this day</a> | next day');  
    } 
    if ($(this).hasClass("today")) { 
     $("#tomorrow").hide(); 
     $("#today").show(); 
     $("#daySelector").html('this day | <a href="#" class="tomorrow">next day</a>'); 

    } 
    return false; 
}); 

Answer 2

從鏈接中刪除單擊處理程序，添加一個選擇屬性：

echo '<p id="daySelector">today | <a href="#" selector="tomorrow">tomorrow</a></p>'; 

添加一個單擊處理程序：應注意live is deprecated爲1.7

$('#daySelector').on('click','a', function() { 
    return switchDay(this.attr("selector")); 
}); 

那

function switchDay(selector) { 
    if (selector == "tomorrow") { 
     $("#today").hide(); 
     $("#tomorrow").show(); 
     $("#daySelector").html('<a href="#" selector="today">this day</a> | next day'); 

    } else if (selector == "today") { 
     $("#tomorrow").hide(); 
     $("#today").show(); 
     $("#daySelector").html('this day | <a href="#" selector="tomorrow">next day</a>'); 

    } 
    return false; 
} 

Answer 3

代表該事件的父元素，你可以擺脫的if/else因爲.toggle()允許您在一個條件合格 - 真=顯示/ FALSE =隱藏..

$('#daySelector').on('click','a',function(e){  
    e.preventDefault(); // prevent default anchor click action 
    var day = $(this).text(); // get text to check 
    $("#tomorrow").toggle(day.indexOf('this') > -1); // show if currently this 
    $("#today").toggle(day.indexOf('next') > -1); // show if currently next 
    $(this).text(day.indexOf('this') > -1 ? 'next day':'this day'); // toggle text 
});​​​ 

http://jsfiddle.net/pFDsZ/

我只是猜測一些部分，因爲你沒有顯示所有的HTML。

Answer 4

這工作：

標記：

<div id='today'>Content A</div> 
<div id='tomorrow'>Content B</div> 
<p><a href="#" id='switch'>Switch to <span id='switchText'>tomorrow</span></a></p> 

腳本：

$(document).ready(
    function() { 
     showToday(); 
     $('#switch').click(
      function() { 
       var switchText = $('#switchText').text(); 
       if (switchText == 'tomorrow') { 
        showTomorrow(); 
       } else { 
        showToday(); 
       } 
      } 
     ); 
    } 
    ); 
    function showToday() { 
     $('#today').show(); 
     $('#tomorrow').hide(); 
     $('#switchText').text('tomorrow'); 
    } 

    function showTomorrow() { 
     $('#today').hide(); 
     $('#tomorrow').show(); 
     $('#switchText').text('today'); 
    }