2014-11-13 2 views
1

Я ищу динамическое изменение изображения, показанного в диалоговом окне jQuery. Я пытаюсь передать «путь изображения» в качестве параметра, который будет использоваться для изменения изображения, отображаемого в диалоговом окне jQuery. Пожалуйста! Проверьте мой код ниже. По умолчанию в диалоговом окне jQuery будет отображаться 'images/firstImage.jpg'. Теперь я пытаюсь изменить его на 'images/secondImage.jpg' через параметр jQuery Dialog.Как передать параметр из 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"); 
} 

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

Смежные вопросы