Javascript Can'；不能用jquery加载图像

刚刚开始。我正在尝试从文件夹加载图像。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();

});

$（函数（）{
$（'#main'）。附加（''）
$（'#clickMe'）。切换（函数（）{
$（'#message'）。show（'fast'）；
$（'#clickMe'）.attr（'src'，减去.png）；
}，函数（）{
$（'#message'）。隐藏（'slow'）；
$（'#clickMe'）.attr（'src'，plus.png）；
});
$（“#消息”）.hide（）；
});

通过阅读代码，我不完全确定您希望它做什么。 如果您的想法是在页面加载时显示一个图像，并且在单击该图像后，您希望更改其来源并显示

#消息

，那么只要您有正确的图像路径，这应该是可行的

$(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');
    }
  });
});

$（函数（）{
//将图像添加到元素
$（'#main'）。附加（''）；
$（'main'）。在（'click'，'clickMe'，函数（）上{
//检查消息是否可见，如果可见，则将其隐藏
if（$（this）.hasClass（'expanded'））{
$（this.attr（'src'，'plus.png'）.removeClass（'expanded'）；
$（'#message'）。隐藏（'slow'）；
}
//否则，请显示它
否则{
$（this.attr（'src'，'minus.png'）.addClass（'expanded'）；
$（'#message'）。show（'fast'）；
}
});
});

编辑： 您的版本无法工作的原因是，

.toggle（）

在页面加载后立即切换，因此它会立即隐藏您的消息。这不是您想要的-您想要的是设置一个事件侦听器，使其仅在单击图像后进行隐藏。另一件事-在示例中没有设置图像的高度和宽度，因此这是另一件可能存在问题的事-即使加载了图像，也无法显示图像

---

是的，您可以动态添加类。不需要在CSS中定义它们。

$（'clickMe'）.attr（'src'，plus.png）

应该是

$（'#clickMe'）.attr（'src'，'plus.png'）

和

减号.png也是一样，我在两个文件中都添加了“”，但没有任何改变。仍然未加载请验证映像路径是否正确。如果此脚本位于文件（例如index.html）中，请确保您的图像位于同一文件夹中，而不是位于子文件夹中，如
images/plus.png
。嘿！你的版本有效！谢谢！要比较并试着理解为什么我的类不起作用：）有一件事我不明白，就是hasClass（“扩展”）我的代码中没有这个类，那么它为什么起作用？@arkusie对于这个类，你只需添加一些东西来区分这两种状态。很好，该类没有任何与之关联的样式<代码>if（$（this）.hasClass（'expanded'））

检查我们是否应该显示或隐藏文本。因此，基本上我可以动态添加和删除此类，而无需之前对其进行定义？对不起，我提出了一些愚蠢的问题，我刚刚开始自学，当我存够了时，我将参加一些学习program@arkusie我编辑了我的答案。如果有什么不清楚的地方，就直接问。