jQuery在两个视图之间切换

Question

I got two divs with the id's today and tomorrow . As only one of them can be shown, I wrote a javascript function which switches between those two.

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

In my PHP I echo the switch links like this:

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

As you can see, I already switched hide() and show() to jquery functions (before I was using .style.display functions) and would now like to also ditch the old onclick and rather use the jquery .click() . Though, I am not sure how I would change the switch links.

How can I do this? (Best would be if it didn't make my script bigger by much...)

Answer 1

There are many approaches to this (God, I love programming because of this).

An easy one would be to do this:

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

Then just do the PHP like this:

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

I didn't test it. Should still work.

Following a comment below that reminded me of live being deprecated. Here's how it would be using .on method. I edited too avoiding usage of document for the binding.

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

Remove the click handler from the link, add a selector attribute:

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

Add a click handler:

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

It should be noted that live is deprecated as of 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

delegate the event to the parent element and you can get rid of the if/else because .toggle() allows you to pass in a condition - 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/

I was just guessing some parts as you didn't show all your html.

Answer 4

This works:

Markup:

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

Script:

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