他の関数でajax変数を使用したい

Question

私はモーダルを使用したいので、私はajaxからデータ値を取得します。データは、[インターネット '、'説明 '、'旅行情報 '、'ソース_

source_name変数の値にsource_name "Internet"の値を設定します。 この行にsoure_name変数を使用します。

html += '<li><span> 출처 : <a href="/tag/' + source_slug + '">' + source_name + '</a>' 

ですが、source_nameは未定義です。 助けてください

これはコードです。

function showModal(){ 

      var pk = $(this).find('img').attr('id'); 
      $.ajax({ 
      url : '/photo/' + pk + '/', 
      async: false, 
      success: function(data){ 
       data= JSON.stringify(data) 
       var source_slug = data[0]["source_slug"]; 
       var source_name = data[0]["source_name"]; 
       var description = data[0]["description"]; 
       var subject_slug = data[0]["subject_slug"]; 
       var subject_name = data[0]["subject_name"]; 
       } 
      }); 
var src = $(this).find('img').attr('src'); 
      var largeImg = $(this).find('img').attr('data-bsp-large-src'); 
      if(typeof largeImg === 'string'){ 
       src = largeImg; 
      } 
      var index = $(this).attr('data-bsp-li-index'); 
      var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index'); 
      var ulId = $(this).parent('ul').attr('data-bsp-ul-id'); 
      var theImg = $(this).find('img'); 
      var pText = $(this).find('.text').html();   
      var modalText = typeof pText !== 'undefined' ? pText : 'undefined'; 
      var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null; 

      clicked.img = src; 
      clicked.prevImg = parseInt(index) - parseInt(1); 
      clicked.nextImg = parseInt(index) + parseInt(1); 
      clicked.ulIndex = ulIndex; 
      clicked.ulId = ulId; 


      $('#bsPhotoGalleryModal').modal(); 

      var html = ''; 
      var img = '<img src="' + clicked.img + '" class="img-responsive"/>'; 

      html += img; 
      html += '<span class="' + settings.iconClose + ' bsp-close"></span>'; 
      html += '<div class="bsp-text-container">'; 
      html += '<li><span> 출처 : <a href="/tag/' + source_slug + '">' + source_name + '</a>' 
      html += '</span></li>' 
      html += '<li><span> 과목 및 단원 :<a href="/tag/' + subject_slug + '">' + subject_name + '</a>' 
      html += '<li><span>' + description + '</span></li>' 
      html += '</div>'; 
      html += '<a class="bsp-controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>'; 
      html += '<a class="bsp-controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>'; 

      $('#bsPhotoGalleryModal .modal-body').html(html); 
      $('.bsp-close').on('click', closeModal); 
      showHideControls(); 
     } 

Answer 1

あなたが成功内部の変更を行う必要はありません後：

function showModal(){ 

    var pk = $(this).find('img').attr('id'); 
    $.ajax({ 
    url : '/photo/' + pk + '/', 
    async: false, 
    success: function(data){ 
     data= JSON.stringify(data) 
     var source_slug = data[0]["source_slug"]; 
     var source_name = data[0]["source_name"]; 
     var description = data[0]["description"]; 
     var subject_slug = data[0]["subject_slug"]; 
     var subject_name = data[0]["subject_name"]; 
     var src = $(this).find('img').attr('src'); 
     var largeImg = $(this).find('img').attr('data-bsp-large-src'); 
     if(typeof largeImg === 'string'){ 
      src = largeImg; 
     } 
     var index = $(this).attr('data-bsp-li-index'); 
     var ulIndex = $(this).parent('ul').attr('data-bsp-ul-index'); 
     var ulId = $(this).parent('ul').attr('data-bsp-ul-id'); 
     var theImg = $(this).find('img'); 
     var pText = $(this).find('.text').html();   
     var modalText = typeof pText !== 'undefined' ? pText : 'undefined'; 
     var alt = typeof theImg.attr('alt') == 'string' ? theImg.attr('alt') : null; 

     clicked.img = src; 
     clicked.prevImg = parseInt(index) - parseInt(1); 
     clicked.nextImg = parseInt(index) + parseInt(1); 
     clicked.ulIndex = ulIndex; 
     clicked.ulId = ulId; 


     $('#bsPhotoGalleryModal').modal(); 

     var html = ''; 
     var img = '<img src="' + clicked.img + '" class="img-responsive"/>'; 

     html += img; 
     html += '<span class="' + settings.iconClose + ' bsp-close"></span>'; 
     html += '<div class="bsp-text-container">'; 
     html += '<li><span> 출처 : <a href="/tag/' + source_slug + '">' + source_name + '</a>' 
     html += '</span></li>' 
     html += '<li><span> 과목 및 단원 :<a href="/tag/' + subject_slug + '">' + subject_name + '</a>' 
     html += '<li><span>' + description + '</span></li>' 
     html += '</div>'; 
     html += '<a class="bsp-controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '"><span class="' + settings.iconRight + '"></span></a>'; 
     html += '<a class="bsp-controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '"><span class="' + settings.iconLeft + '"></span></a>'; 

     $('#bsPhotoGalleryModal .modal-body').html(html); 
     $('.bsp-close').on('click', closeModal); 
     showHideControls(); 
    } 
     });}