Php jquery在两个视图之间切换

我有两个div，id是

今天

和

明天

。由于只能显示其中一个，所以我编写了一个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;
}

功能切换日（选择器）{
如果（选择器==“明天”）{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}
如果（选择器==“今天”）{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
}

在我的PHP中，我重复如下切换链接：

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

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

echo'
今天
；

如您所见，我已经将hide（）和show（）切换为jquery函数（在使用.style.display函数之前），现在还想放弃旧的

onclick

，而是使用jquery

。click（）

。不过，我不确定如何更改交换机链接

---

我该怎么做？（最好不要让我的脚本变得更大…

有很多方法可以做到这一点（上帝，我喜欢编程就是因为这个）

一个简单的方法是：

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

$（'#daySelector a'）.live（'click'，function（）{
如果（$（this.hasClass（“明天”））{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}
如果（$（this）.hasClass（“今天”））{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
});

然后，只需像这样执行PHP：

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

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

echo'
今天
；

我没有测试它。应该还能用

下面的一条评论让我想起了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;
});

$（'daySelector'）。在（'click'，'a'，function（）{
如果（$（this.hasClass（“明天”））{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}
如果（$（this）.hasClass（“今天”））{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
});

有很多方法可以做到这一点（上帝，我喜欢编程就是因为这样）

一个简单的方法是：

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

$（'#daySelector a'）.live（'click'，function（）{
如果（$（this.hasClass（“明天”））{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}
如果（$（this）.hasClass（“今天”））{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
});

然后，只需像这样执行PHP：

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

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

echo'
今天
；

我没有测试它。应该还能用

下面的一条评论让我想起了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;
});

$（'daySelector'）。在（'click'，'a'，function（）{
如果（$（this.hasClass（“明天”））{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}
如果（$（this）.hasClass（“今天”））{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
});

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

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

应注意，从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;
}

功能切换日（选择器）{
如果（选择器==“明天”）{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}else if（选择器==“今天”）{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
}

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

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

应注意，从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;
}

功能切换日（选择器）{
如果（选择器==“明天”）{
$（“#今天”）.hide（）；
$（“#明天”）.show（）；
$（“#daySelector”）.html（“|次日”）；
}else if（选择器==“今天”）{
$（“#明天”）.hide（）；
$（“#今天”）.show（）；
$（“#daySelector”）.html（'this day |'）；
}   
返回false；
}

将事件委托给父元素，您可以去掉if/else，因为它允许您传递一个条件-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
});​​​

---

我只是猜测了一些部分，因为您没有显示所有html。

将事件委托给父元素，您可以去掉if/else，因为它允许您传递一个条件-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
});​​​

我只是猜测了一些部分，因为您没有显示所有的html。

这很有效：

标记：

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

这项工作：

标记：

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

---

似乎你有一些奇怪的逻辑在进行。。。你到底想做什么？他正试图切换显示的div并更新切换视图的链接。看起来你有一些奇怪的逻辑在进行。。。你到底想做什么？他想切换显示的div并更新切换视图的链接。总的来说，你的解决方案比我提出的要优雅得多。我的解决方案是考虑他已经存在的逻辑。您的重构更好：）绑定到

#daySelector

比

文档

更理想，我不认为

类

是识别选择器的理想方式

class

应该保留其用于css样式。您可能需要添加一个preventDefault，这样页面就不会跳转到顶部：）@Bankzilla

return false

是防止锚被跟踪的经典Javascript方法，因此基本上涵盖了这一点（尽管可能不是以jQuery方式）。总体而言，你的解决方案比我提出的要优雅得多