2014-11-13 4 views
1

jQuery 대화 상자에 표시된 이미지를 동적으로 변경하려고합니다. jQuery 대화 상자에 표시된 이미지를 변경하는 데 사용할 매개 변수로 '이미지 경로'를 전달하려고합니다. 부디! 아래 내 코드를 확인하십시오. 기본적으로 jQuery 대화 상자에 'images/firstImage.jpg'가 표시됩니다. 이제 jQuery Dialog 매개 변수를 통해 'images/secondImage.jpg'로 변경하려고합니다.어떻게 jQuery Dialog에서 매개 변수를 전달하고 html의 내용을 변경할 수 있습니까?

<link href="jquery/jquery-ui.css" rel="stylesheet" /> 
 
    <script src="jquery/jquery-1.10.2.js"></script> 
 
    <script src="jquery/jquery-ui.js"></script> 
 
    <script> 
 
     $(function() { 
 
      // this initializes the dialog (and uses some common options that I do) 
 
      $("#dialog").dialog(
 
       { 
 
        autoOpen: false, 
 
        modal: true, 
 
        show: "blind", 
 
        hide: "blind", 
 
        width: "50%", 
 
        height: "auto", 
 
        resizable: false, 
 
        position: 'center', 
 
        overflow: "hidden", 
 
       }); 
 
     }); 
 

 
     function OpenGallary(photoSrc) { 
 
      $("#dialog").dialog("open").data("param", photoSrc); 
 
     } 
 
    </script>
<body> 
 
    <a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a> 
 
    <div id="dialog" title="Photo Gallary"> 
 
     <div id="aa" style="width: 800px;"> 
 
      hello this is my world. 
 
     </div> 
 
     <p> 
 
      <img src="images/firstImage.jpg" /> 
 
     </p> 
 
    </div> 
 
</body>

답변

1

귀하의 기능 OpenGallary (나는 당신이 갤러리를 의미하는 생각,하지만 난 빗나가 다) 단지 이미지 태그에 영향을 미치지 않을 것입니다 대화 DIV에 데이터 속성을 설정하는 것입니다.

OpenGallary 기능

이 같은 것을 변경할 수 있습니다 : 당신이 뭘하려는 건지에 따라

function OpenGallary(photoSrc) { 
    // Change the src attribute directly on the img in the dialog: 
    $("#dialog img").attr("src", photoSrc); 
    // Now that the dialog html is updated, open the dialog: 
    $("#dialog").dialog("open"); 
} 

, 당신은 태그의 ID로 직접 IMG를 선택 할 수 있습니다 - 셀렉터를 위의 사용 기존 html로 작업하기위한 것입니다.