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