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

添加点击处理程序：

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

应该注意到live is deprecated为1.7

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()允许你传入一个条件 - true = show / false = hide ..

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

jquery在两个视图之间切换

4 个答案: