0

我有两个 div 的 idtoday和tomorrow. 由于只能显示其中一个，我编写了一个在这两者之间切换的 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()。不过，我不确定如何更改切换链接。

我怎样才能做到这一点？（最好不要让我的脚本变得更大......）

4

4 回答 4

3

有很多方法可以解决这个问题（上帝，我因此喜欢编程）。

一个简单的方法是这样做：

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

我没有测试它。应该还能工作。

下面的评论让我想起了 live 已被弃用。这是使用 .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;
});
于 2012-10-04T21:33:17.713 回答
0

从链接中删除点击处理程序，添加选择器属性：

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

添加点击处理程序：

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

应该注意的是，从 1.7 开始live不推荐使用

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;
}
于 2012-10-04T21:34:08.020 回答
0

将事件委托给父元素，您可以摆脱 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。

于 2012-10-04T21:38:11.423 回答
0

这有效：

标记：

<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');
    }
于 2012-10-04T22:01:20.727 回答