Создание повторно используемой функции jQuery

Question

Вместо того, чтобы каждый раз переписывать массивный блок кода, я пытаюсь включить функции в свою работу, но у меня возникают проблемы с тем, чтобы это работало.

По сути, у меня есть выбор радио-кнопок, и я выполняю некоторые вещи каждый раз, когда нажимается радио-кнопка. (На самом деле я загружаю iFrame). Тем не менее, мне нужно сделать iFrame SRC разным для каждой радиокнопки, так как бы я учел это в функции?

Функция:

jQuery.fn.switchPreview = function () {
$('.liveDemoFrame').remove();
$('.liveDemoHand').append('<iframe class="liveDemoFrame" src="themes/src/' + themeName + '/" width="100%" height="300" scrolling="no"><p>Your browser does not support iframes.</p></iframe>');
$('.liveDemoHand').append('<div class="switchPreview"><div class="loadingPreview"></div></div>');
$('.liveDemoFrame').load(function() {
    $('.switchPreview').fadeOut();  
    $('.switchPreview').remove();   
    $('.liveDemoFrame').fadeIn();
});
return this;
}

В iFrame SRC у меня есть переменная с именем themeName. Мне нужно, чтобы это как-то изменилось для каждой переключательной кнопки. Вы можете увидеть в коде, который вызывает функцию, которую я пытался объявлять переменную каждый раз, но это все равно дает мне неопределенную ошибку.

Код, который его вызывает:

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

Я уверен, что это что-то очень простое, но я все еще учусь, поэтому мелочи всегда сбивают меня с толку!

Answer 1

Передайте themeName в качестве аргумента функции switchPreview.

-Измените первую строку функции на:

jQuery.fn.switchPreview = function (themeName) {

-Для каждого из трех вызовов, которые вы вызываетефункция, убедитесь, что вы передаете аргумент, то есть:

$('.liveDemoFrame').switchPreview(themeName);

Answer 2

Почему бы просто не обновить тег src в iframe ...

$('#cTheme1').click(function () { 
    $('input:radio[name=mgChooseTheme]:nth(1)').attr('checked',true); 
            $('#liveDemoFrame').attr('src', <the new url>);
});

Тогда ваш iframe уже должен быть частью страницы:

<iframe id='liveDemoFrame' src='<default page>'></iframe>

Я заметил, что выиспользуя атрибут CLASS в iFrame и получая к нему доступ - вам действительно нужно подумать об использовании атрибута ID, если вы просто хотите сослаться на один объект.(как в моем примере выше)