javascript - 似乎没有得到 $().attr ('src' ) 来完成它的工作

Question

第一次在这里发帖，所以请温柔;-)

在过去的几周里，我一直在通过制作一个虚拟页面来学习编码，并且随着我的进步逐步实现我在其中学到的东西，因此它是一个混合包，其中的功能/代码是根据我编写的时间而定的它基于纯 html/CSS、内联 javascript、外部 javascript，最后是 jquery。

所以我基本上把它包起来了，现在我正在收拾残局，我的部分任务是剔除功能和代码行，其中一个我有点卡住了。

之前是 30 个按钮调用 30 个不同的 onclick 函数，如下所示:

function cell3() {

         document.getElementById('base3').src='images/1/3/' + x + '.png';
         document.getElementById('base3b').src='images/1/3/' + x + '.png';
         document.getElementById('v2base3').src='images/2/3/' + x + '.png';
         document.getElementById('v2base3b').src='images/2/3/' + x + '.png';
         document.getElementById('cell3').style.backgroundColor= x ;
}   

其中全局变量 (x) 定义图像的文件夹路径，以在单击按钮 (cell3) 时替换某些 div 中的图像。它还会更改它的 bGroung 颜色。对不起，如果命名有点困惑......

所以我用这个 jquery 删除了所有 30 个函数和 30 个 onclick 调用:

$('button').click(function(){

  var eyeD = $(this).attr("id"); 
  var newURLa = 'images/1/' + eyeD + '/' + x + '.png';
  var newURLb = 'images/2/' + eyeD + '/' + x + '.png';

    $('base' + eyeD).attr('src', newURLa);
    $('base' + eyeD + 'b').attr('src', newURLa);
    $('v2base' + eyeD).attr('src', newURLb);
    $('v2base' + eyeD + 'b').attr('src', newURLb);
    $(this).css( "background-color", x );
    document.getElementsByid('check').innerhtml = eyeD;

});

为了“工作”，我将按钮的名称从“cell1”、“cell2”等更改为“1”、“2”等。

现在的问题是，当单击按钮时，var 'eyeD' 会从按钮 ok 中获取值。 (“1”、“2”等)。元素 ID 的格式正确('base1'、'base2'... 'base1b'、base2b'...)，并且 URL 的格式正确。 (代码中的最后一行是显示值的 p 元素，因此我可以尝试对其进行故障排除)背景颜色也按预期更改。但图像不会被替换。

尝试在生成的 URL 中添加逗号以防出现语法问题，但没有任何反应。我什至尝试了自由式并尝试使用 =url() ，在不同的地方使用不同的逗号等。所以基本上在这里刮桶。还写了一个没有变量的 url 来查看是否可行，但仍然没有。查看控制台时也没有错误。

这可能是一个基本的“DOH!”事情，但现在我有精神障碍......

此外，有没有办法保留原始命名并只检索 ID 的编号部分？考虑过使用 [4] 标识符来获取第 5 位数字，但是在运行两位数时这将不起作用。 (10、11 等)

谢谢!

Answer 1

您访问元素的 jQuery 行缺少 # 符号。

改变这些...

$('base' + eyeD).attr('src', newURLa);

为此...

$('#base' + eyeD).attr('src', newURLa);

此外，您使用普通 JS 的最后一行也可以在 jQuery 中完成，代码更少。

document.getElementsByid('check').innerhtml = eyeD;

为了...

$("#check").html(eyeD);

但是，您应该始终为元素使用不同的 ID。如果您需要同时使用多个元素，请改用类。

$(".check").html(eyeD);