Javascript jQuery问题无法检索或设置属性&x27；未定义'；

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

我试图使img元素的默认start为空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>

---

将所有JavaScript放在JQuery

document.ready（）

函数中，使其在加载DOM并准备好与之交互之前不会执行

然后，确保使用了正确的选择器

• 标记名通过元素名获取元素
• Prepending

  #

  按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 );
});

---

将所有JavaScript放在JQuery

document.ready（）

函数中，使其在加载DOM并准备好与之交互之前不会执行

然后，确保使用了正确的选择器

• 标记名通过元素名获取元素
• Prepending

  #

  按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 );
});

您需要通过id将

$（“#primary”）

发送到目标元素。
在您的情况下：

$（“primary”）

将尝试查找名为

的HTML元素。您需要通过id将

$（“#primary”）

转换为目标元素。

---

在您的情况下：

$（“primary”）

将尝试查找名为

的HTML元素，我对Scott给我的内容进行了一些小的调整，现在一切都正常了=）

我的img现在是从工具提示信息包中包含的信息实例化的。最终将由js自己提供，如果事情进展顺利，js将通过xml在外部提供

感谢Scott和公司的帮助，最终优化代码如下：

最终代码

HTML

---

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

我的img现在是从工具提示信息包中包含的信息实例化的。最终将由js自己提供，如果事情进展顺利，js将通过xml在外部提供

感谢Scott和公司的帮助，最终优化代码如下：

最终代码

HTML

---

所有选择器的格式都是标记名查找，而不是类或ID。您需要修复选择器。正如Taplar所说，修复选择器，通过

id

查找元素时使用

#

，以及在查找具有该类的元素时使用

，所有选择器的可能副本都是标记名查找格式，而不是类或id。你需要修复你的选择器。正如Taplar所说，修复你的选择器，在通过

id

查找元素时使用

，在查找具有该类的元素时使用

使用tooltip\u imgSame和tooltip\u imgThanks可能重复，但这只是部分修复了问题：$（function（）{alert($(“#tooltip_primary_img”）.attr（“src”）；function initialize（）{$（#primarycon”）.attr（“src”），$（#tooltip_primary_img”）.attr（“src”）；}window.addEventListener（“load”，initialize，false）；}）；通过这些添加，至少开始时的警报测试正确地返回了我“../images/sword01.jpg”而不是“undefined”。初始化函数仍然失败，我的事件在“Primary”（alt）上运行，而不是我想要的图像。谢谢，但这只是部分修复了问题：$（function（）{alert（$（“#tooltip_Primary_img”）.attr（“src”）；函数initialize（）{$（“#primarycon”）.attr（“src”），$（“#工具提示(u primary_img”）.attr（“src”）；}窗口。addEventListener（“加载”，初始化，false）；}）；通过这些添加，至少开始时的警报测试正确地返回了我“../images/sword01.jpg”而不是“undefined”。初始化函数仍然失败，我的事件将鼠标悬停在“Primary”（alt）上，而不是我想要的图像上。

<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>

  $(function(){
    initialize();
  });

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