无法解决未捕获的参考错误

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>

Answer 2

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

$('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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

draw_images函数在$('.submit').on('click', function() {...}内部声明 并且.done仅可用于ajax和其他promise。

更新： 请将事件附加到特定元素而不是整个身体。像这样 $(".preview").click(function(event) {...})。