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'); 
    }