JQuery Dialod изменить название из многих «а» не работает

Question

Я получаю заголовок каждого a элемента, но не могу присвоить ему #dialog заголовок.Он работает только для первого элемента a, следующие элементы не работают.

Это небольшая галерея, при нажатии во всплывающем диалоге я вижу большое изображение, но заголовок не изменяется.Я не понимаю, где моя ошибка.

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript">
PreviewImage = function(uri,xtitle) {    // main function xtitle here
  imageDialog = $("#dialog");
  imageTag = $('#image');                // big image src
  uriParts = uri.split("/");
  imageTag.attr('src', uri);             // get src
  imageTag.load(function(e){
    $('#dialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      width: '800px'
      // open: function(e) {                 // I thinks this code does not work
      //   $(".ui-dialog-title").text(xtitle);
      //   if (xtitle.length != 0) {
      //     $(".ui-dialog-title").text(xtitle + ": ");
      //   }
      // }
    });
  });
}
$(document).ready(function() {
  $('body a.popup').click(function (event) {
    var xtitle = $(this).attr('title'); // this get each element title
    alert($(this).attr('title'));       // alert works fine
    event.preventDefault();
    PreviewImage($(this).attr('href'),xtitle);
    return false;
  });
});
</script>
<div id="dialog" title="empty title" style="display:none;">
  <img id="image" src="" style="max-width:100%;" />
</div>
<div class="col-sm-2"><a id="image1" class="popup" title="img one" href="r.jpg" target="_blank"><img src="l1.jpg" alt="img one" title="one one">one</a></div>
<div class="col-sm-2"><a id="image2" class="popup" title="title z" href="1.jpg" target="_blank"><img src="l2.jpg" alt="">text2</a></div>

Answer 1

Вы должны использовать свойство title .dialog() вместо попытки установить его с помощью селектора $(".ui-dialog-title") ...

См. Код ниже.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.min.css" />
<script type="text/javascript">
PreviewImage = function(uri,xtitle) {    // main function xtitle here
  imageDialog = $("#dialog");
  imageTag = $('#image');                // big image src
  uriParts = uri.split("/");
  imageTag.attr('src', uri);             // get src
  imageTag.load(function(e){
    $('#dialog').dialog({
      modal: true,
      resizable: false,
      draggable: false,
      width: '800px',
      title: xtitle+": ",  // <-------- Here you set the dialog title.
    });
  });
}
$(document).ready(function() {
  $('body a.popup').click(function (event) {
    var xtitle = $(this).attr('title');   // this get each element title
    //alert($(this).attr('title'));       // alert works fine
    event.preventDefault();
    PreviewImage($(this).attr('href'),xtitle);
    return false;
  });
});
</script>
<div id="dialog" title="empty title" style="display:none;">
  <img id="image" src="" style="max-width:100%;" />
</div>
<div class="col-sm-2"><a id="image1" class="popup" title="img one" href="https://picsum.photos/200/300" target="_blank"><img src="https://picsum.photos/200/300" alt="img one" title="one one">one</a></div>
<div class="col-sm-2"><a id="image2" class="popup" title="title z" href="https://picsum.photos/g/200/300" target="_blank"><img src="https://picsum.photos/g/200/300" alt="">text2</a></div>

Документация диалога jQuery-ui

Answer 2

$ (это) все еще привязано к a.popup.Попробуйте использовать

$(this).find("img").attr('title');