javascript - 无法解决 Uncaught ReferenceError

Question

我正在设计一个网页并面临未捕获的引用错误:“draw_images”未定义。不过我已经定义了这个函数。我认为该错误是由于编程范围造成的。我是这个领域的初学者。我试图在某种程度上改变它，但没有成功。

var similar_images = []
var total_images = []
var attributes = []

$('body').template({
  data: {}
})

$('body').on('click', '.preview', function(o) {
  image = o.currentTarget.src.split('/').slice(-1)[0]
  similar_images.push(image)
  total_images = _.remove(total_images, function(x) {
    return x !== image
  })
  
  $('body').template({
    data: {
      similar: similar_images,
      total: total_images
    }
  })
}).on('click', '.attributes', function(o) {
  $(this).toggleClass('btn-danger')
  value = $(this).data().attributes
  ind = attributes.indexOf(value)
  if (ind != -1) {
    attributes[ind] = attributes[-1]
    attributes.pop()
  } else
    attributes.push(value)
}).on('click', '.attr', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      attributes: attributes
    }
  })
}).done(draw_images)

$('.submit').on('click', function() {
  $.ajax('labelled_images', {
    method: 'POST',
    data: {
      similar: similar_images,
      dissimilar: total_images
    }
  }).done(draw_images)
  $('body').on('click', '.init', function() {
    $.get('init').done(function() {
      window.location = './'
    })
  })

  function draw_images(data) {
    total_images = JSON.parse(data)
    console.log(total_images)
    similar_images = []
    $('body').template({
      data: {
        best_image_url: total_images[0],
        similar: similar_images,
        total: total_images
      }
    })
  }
})

Answer 1

您的函数处于错误的范围内。我在下面列出了正确的顺序。您的子句中不存在该函数

<script>
    var similar_images = []
    var total_images = []
    var attributes = []
    $('body').template({ data: {} })
    // $.get('labelled_images').done(function (images) {
    //   total_images = JSON.parse(images)
    //   console.log(total_images)
    //   $('body').template({
    //     data: {
    //       total: total_images,
    //       similar: similar_images,
    //     }
    //   })
    // })
    $('body').on('click', '.preview', function (o) {
      image = o.currentTarget.src.split('/').slice(-1)[0]
      similar_images.push(image)
      total_images = _.remove(total_images, function (x) { return x !== image })
      $('body').template({
        data: {
          similar: similar_images,
          total: total_images
        }
      })
    }).on('click', '.attributes', function (o) {
      $(this).toggleClass('btn-danger')
      value = $(this).data().attributes
      ind = attributes.indexOf(value)
      if (ind != -1) {
        attributes[ind] = attributes[-1]
        attributes.pop()
      }
      else
        attributes.push(value)
    }).on('click', '.attr', function () {
      $.ajax('labelled_images', {
        method: 'POST',
        data: {
          attributes: attributes
        }
      })
    }).done(draw_images)
    $('.submit').on('click', function () {
      $.ajax('labelled_images', {
        method: 'POST',
        data: {
          similar: similar_images,
          dissimilar: total_images
        }
      }).done(draw_images)
      $('body').on('click', '.init', function () {
        $.get('init').done(function () { window.location = './' })
      })
})

function draw_images(data) {
    total_images = JSON.parse(data)
    console.log(total_images)
    similar_images = []
    $('body').template({
      data: {
        best_image_url: total_images[0],
        similar: similar_images,
        total: total_images
      }
    })
  }
  </script>