jQuery Issue 无法检索或设置属性，'undefined'

Question

我有一个img元素。鼠标悬停时，该图像元素将显示详细的工具提示。

我正在尝试使 img 元素默认开始为空 null，并在加载时从工具提示向它提供图像信息。

我无法使用 $('idName'(.attr(a，b( 检索或分配属性;

下面的 HTML 和 JS：

<div class="col-sm-6 text-left"> 
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td><img id="primary" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('primary_tool_tip').style='display:block'"
onmouseleave="document.getElementById('primary_tool_tip').style='display:none'">
<div id="primary_tool_tip" class="bottom" style="display:none">
<img id="tooltip_img" src="../images/sword01.jpg" /> 
<div id="tooltip_name">Bronze Sword</div>
<div id="tooltip_equipslots">Primary, Secondary</div>
<div id="tooltip_attributes">STR+2 DEX+2</div>
<div id="tooltip_elements">Fire+5</div>
</div>
</td>
<td id="secondary"><img class="img-responsive" src="" alt="Secondary"></td>
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>

.JS

alert($("tooltip_img").attr("src"));

function initialize(){
$('primary').prop('src', $('tooltip_img').attr('src') );    
}

window.addEventListener("load", initialize, false );

Answer 1

将所有 JavaScript 放在 JQuerydocument.ready()函数中，这样它就不会执行，直到 DOM 加载完毕并准备好与之交互。

然后，确保您使用的是正确的选择器。

• 标签名称按元素名称获取元素。
• 前缀#按 ID 获取元素
• 前缀.按类名获取元素

所以一起：

// The contents of an anonymous function that is passed to JQuery
// won't run until the DOM is parsed and ready to be interacted with.
// This is also known as a "document.ready()" function.
$(function(){
alert($("#tooltip_img").attr("src"));
function initialize(){
$('#primary').prop('src', $('#tooltip_img').attr('src') );    
}
window.addEventListener("load", initialize, false );
});

Answer 2

您需要按 id$("#primary")目标元素。
在您的情况下：$("primary")将尝试查找名为<primary>的 HTML 元素

Answer 3

我摆弄了一下斯科特给我的东西做了一些小的调整，现在一切正常=(。

我的 img 现在从工具提示的信息包中包含的信息实例化。它最终将从 js 自身提供，如果事情相应地进行，js 将通过外部的 xml 提供它。

感谢斯科特和公司的帮助，最终改进的代码如下：

最终代码

.HTML

<div class="col-sm-6 text-left"> 
<h1>Member Equipment</h1>
<p>-Show member equipment-</p>
<table class="table">
<tbody>
<tr>
<td>
<img id="primaryIcon" class="img-responsive" src="" alt="Primary"
onmouseover="document.getElementById('tooltip_primary').style='display:block'"
onmouseleave="document.getElementById('tooltip_primary').style='display:none'">
<div id="tooltip_primary" class="standardtooltip">
<img id="tooltip_primary_img" src="../images/sword01.jpg" /> 
<div id="tooltip_primary_name">Bronze Sword</div>
<div id="tooltip_primary_equipslots">Primary, Secondary</div>
<div id="tooltip_primary_attributes">STR+2 DEX+2</div>
<div id="tooltip_primary_elements">Fire+5</div>
</div>
</td>
<!--
<td>
<img id="secondaryIcon" class="img-responsive" src="../images/sword01.jpg" alt="Secondary"
onmouseover="document.getElementById('tooltip_secondary').style='display:block'"
onmouseleave="document.getElementById('tooltip_secondary').style='display:none'">
<div id="tooltip_secondary" class="tooltip" style="display:none">
<img id="tooltip_secondary_img" src="../images/sword01.jpg" /> 
<div id="tooltip_secondary_name">Bronze Sword</div>
<div id="tooltip_secondary_equipslots">Primary, Secondary</div>
<div id="tooltip_secondary_attributes">STR+2 DEX+2</div>
<div id="tooltip_secondary_elements">Fire+5</div>
</div>
</td>
-->
<td id="ranged"><img class="img-responsive" src="" alt="Ranged"></td>
<td id="ammo"><img class="img-responsive" src="" alt="Ammo"></td>

.JS

$(function(){
initialize();
});
function initialize(){
document.getElementById("primaryIcon")
.setAttribute("src", $("#tooltip_primary_img").attr("src"));
alert('working as intended!');
}