재사용 가능한 jQuery 함수 만들기

대용량 코드 블록을 매번 다시 작성하는 대신 함수를 내 작업에 통합하려고하지만 작동에 문제가 있습니다.재사용 가능한 jQuery 함수 만들기

기본적으로 라디오 버튼을 선택했는데 라디오 버튼을 클릭 할 때마다 약간의 작업을 수행하고 있습니다. (실제로 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(); 
});

나는 이것이 매우 간단한 것을 확신하지만 여전히 작은 것들 항상 저를 밖으로 던져 배우고!

출처

2011-11-16 tctc91

아마도 jQuery -> http://api.jquery.com/jQuery.data/에서 data() 메서드를 사용하여 라디오 버튼에 URL로 데이터를 저장 하시겠습니까? – ManseUK

예, 매우 간단합니다. switchName을 switchPreview() 메소드에 전달하기 만하면됩니다. – anson

iframe의 src를 변경하려면 attr을 사용할 수 있습니까? 또는 내가 빠진 것이 있습니까? JSFiddle에 게시하십시오. – Gordnfreeman

switchPreview 함수의 인수로 themeName을 전달하십시오. 에 함수의 첫 번째 라인 - 변경

: 당신이 함수를 호출하는 세 번 각각의 용 -

jQuery.fn.switchPreview = function (themeName) {

, 당신은 즉, 인수에 전달되어 있는지 확인 :

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

출처

2011-11-16 14:46:08 robmisio

완벽하게 작동합니다. 고마워. – tctc91

아니라

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

이 그런 다음 iframe을 이미 페이지의 일부가 될 필요가 iframe을의 src 태그 ... 업데이트 왜

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

을 나는 당신이 클래스를 사용주의 속성을 사용하여 iFrame에 액세스하고이를 사용하여 액세스하십시오. 단일 객체를 참조하려는 경우 ID 속성을 사용하는 것이 좋습니다. (위 예제에서와 같이)

출처

2011-11-16 14:43:54 ManseUK

재사용 가능한 jQuery 함수 만들기

답변

관련 문제