Question

I’m looking to rewrite the following code so that instead of only changing the image src for the selector element on the first click, a second click will change the image src to images/spacer.gif, and any subsequent clicks will just loop between appending the image src and replacing it with the spacer. Because this function uses radio buttons and an (event), I want to stay away from .toggle, if possible. The code block below only works for the first function.

    $('.item-button').click(function(event) {
    var layerID = $(this).attr('data-layer');
    var itemID = $(this).attr('data-item');
    var selector = '#layer-' + layerID;

          //an itemID of 0 means the item doesn't exist. 
    if (itemID == 0) {
        $('#layer-' + layerID).attr('src', 'images/spacer.gif');
    } else {
        var imageSrc = $(this).parent().find('img').attr('id');
        $(selector).attr('src', imageSrc);
    }
    },
   //a second nonfunctional function to change the src to the spacer in case the same radio button is clicked twice. 
    function(){
      $('#layer-' + layerID).attr('src', 'images/spacer.gif');
      });

Answer 1

Instead of looking at your code, I’ll give you a snippet which you can customize:

//set initial status
$('element').data('status','not_clicked');

$('element').click(function(){
    if( $(this).data('status') == 'clicked' ) {
        $(this).data('status','not_clicked');

        //your code in case of second click
    } else {
        $(this).data('status','clicked');

        //your code in case of first click
    }
});

What it does:

1. Sets the initial status – not_clicked
2. In case of a click:
   • If the current status is clicked sets it to not_clicked (reset) and runs scripts
   • else – changes status to clicked and runs scripts.