title: Creating a reusable jQuery function
body: <p>Instead of re-writing a massive block of code each time, I'm trying to incorporate functions into my work but I'm having trouble making it work.</p>
  
  <p>Basically, I've got a selection of radio buttons and I'm performing some stuff each time a radio button is clicked. (I'm actually loading an iFrame). However, I need to make the iFrame SRC different for each radio button so how would I cater for this within the function?</p>
  
  <p>The function:</p>
  
  <pre><code>jQuery.fn.switchPreview = function () {
  $('.liveDemoFrame').remove();
  $('.liveDemoHand').append('&lt;iframe class="liveDemoFrame" src="themes/src/' + themeName + '/" width="100%" height="300" scrolling="no"&gt;&lt;p&gt;Your browser does not support iframes.&lt;/p&gt;&lt;/iframe&gt;');
  $('.liveDemoHand').append('&lt;div class="switchPreview"&gt;&lt;div class="loadingPreview"&gt;&lt;/div&gt;&lt;/div&gt;');
  $('.liveDemoFrame').load(function() {
      $('.switchPreview').fadeOut();  
      $('.switchPreview').remove();   
      $('.liveDemoFrame').fadeIn();
  });
  return this;
  }
  </code></pre>
  
  <p>Within the iFrame SRC I have a variable called themeName. I need this to somehow change for each radio button. You can see within the code that calls the function I've tried to declare the variable each time but this still gives me an undefined error.</p>
  
  <p>The code that calls it:</p>
  
  <pre><code>$('#cTheme1').click(function () { 
      $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
              var themeName = 'theme1';
              $('.liveDemoFrame').switchPreview();
  });
  
  $('#cTheme2').click(function () { 
      $('input:radio[name=mgChooseTheme]:nth(2)').attr('checked',true); 
              var themeName = 'theme2';
              $('.liveDemoFrame').switchPreview();
  });
  
  $('#cTheme3').click(function () { 
      $('input:radio[name=mgChooseTheme]:nth(3)').attr('checked',true); 
              var themeName = 'theme3';
              $('.liveDemoFrame').switchPreview();
  });
  </code></pre>
  
  <p>I'm sure this is something very simple but I'm still learning so little things always throw me off!</p>