无法使用 jquery 加载图像

Question

刚刚开始。我正在尝试从文件夹加载图像。 html 和 javascript 文件与图像在同一个文件夹中，但我仍然无法加载它们。

$(function() { 
$('#main').append('<img src="plus.png" alt="click to see the paragraph" 
id="clickMe" />')
$('#clickMe').toggle(function() {
$('#message').show('fast');
$('#clickMe').attr('src', minus.png);

}, function(){
$('#message').hide('slow');
$('#clickMe').attr('src', plus.png);
});
$('#message').hide();

});

Answer 1

通过阅读代码，我不完全确定你想要它做什么。 如果想法是在页面加载时显示图像，并且在单击图像后，您想更改其来源并显示#message，那么只要您具有正确的图像路径，这应该可以工作。

$(function() { 
  // add the image to element
  $('#main').append('<img src="plus.png" alt="click to see the paragraph" id="clickMe" width="100" height="100"/>');
  $('#main').on('click', '#clickMe', function() {
    // check if message is visible, if so, hide it
    if ($(this).hasClass('expanded')) {
      $(this).attr('src', 'plus.png').removeClass('expanded');
      $('#message').hide('slow');
    }
    // otherwise show it
    else {
      $(this).attr('src', 'minus.png').addClass('expanded');
      $('#message').show('fast');
    }
  });
});

编辑： 您的版本无法正常工作的原因是因为.toggle() 在页面加载后立即切换，因此它会立即隐藏您的消息。这不是您想要的 - 您想要的是设置一个事件侦听器以仅在您单击图像后进行隐藏。另一件事 - 您没有在示例中设置图像的高度和宽度，所以这可能是另一个问题 - 即使已加载，您的图像也根本没有显示。

是的，您可以即时添加课程。不需要在 CSS 中定义它们。