Question

我有产品：

<article>
        <img src="https://static.svyaznoy.ru/upload/iblock/d1c/4165313_10.jpg/resize/483x483/hq/" id="Phone1" alt="image" title="nokia">
        <h2>100$</h2>
        <p>Nokia</p>

        <span class="btns">
           <a href="javascript:void(0)" class="btn1" id="Phone1"   onclick="addItem()">Addу</a>
           <a href="" class="btn1">about</a></span>

    </article>
function addItem(id){
    console.log(id);
    let xhr = new XMLHttpRequest();

    xhr.open('POST', '/addItem', true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify({id:id}));
    }

如何发送函数addItem（） - img src，h2标签中的内容和p标签中的内容，如果href看不到它们？

Answer 1

首先，您有两个id=Phone元素。 id必须是唯一的。

您需要查询包含所需内容的元素，并且可以使用 .querySelector() 执行此操作。

然后，您可以从元素中提取数据。要获取src值，只需访问image元素的.src属性即可。要获取p和h2的内容，请使用.textContent属性。

最后，您需要通过将父article元素作为单个参数发送到addItem来将数据传递给您的函数。这将允许addItem使用该单个DOM元素作为提取所需数据的起点。

此外，您应该解决以下问题：

您不应该使用内联HTML事件属性（onclick）设置你的活动。该技术已超过20年 and there are many reasons not to use it 。相反，遵循现代标准并将您的JavaScript与HTML分开并使用 .addEventListener() 设置事件处理程序。
不要使用超链接来触发一些JavaScript。超链接用于导航。如果你只是想给用户点击的东西，几乎任何支持click的HTML元素事件。遵循这一建议，您会注意到您不必这样做担心禁用链接的本机点击行为 javascript:void(0)，这也是一种古老而过时的技术不应该使用。

＆＃13;

let btn = document.getElementById("add");
btn.addEventListener("click", function(){
  // Get a reference to the <article> parent element and pass that.
  // This way, addItem can extract any/all data from that structure 
  // that it may need.
  let art = this.parentElement.parentElement;
  addItem(art);
});

function addItem(article){
    // Scan the article element for the descedants that are desired
    // and then get the content of those and use them to create a new object
    let product = {
      id:article.querySelector("h2").textContent, 
      src:article.querySelector("img").src, 
      brand:article.querySelector("p").textContent
    };
    
    console.log(product);
    
    let xhr = new XMLHttpRequest();
    xhr.open('POST', '/addItem', true);
    xhr.setRequestHeader("Content-type", "application/json");
    xhr.send(JSON.stringify(product));
}

＆＃13;

/* You can use many different elements and make them look/feel like buttons */
.btn1 { cursor:pointer; display:inline-block; padding:3px; border:1px solid lightgrey; }
.btn1:hover { background-color:#e0e0e0; }

img {height:50px;} /* Just for this example */

＆＃13;

<article>
  <img src="https://static.svyaznoy.ru/upload/iblock/d1c/4165313_10.jpg/resize/483x483/hq/" 
       id="Phone1" alt="image" title="nokia">
  <h2>100$</h2>
  <p>Nokia</p>

  <span class="btns">
    <span class="btn1" id="add">Addу</span>  
    <span class="btn1">About</span>
  </span>
</article>

＆＃13;

如何从其他节点传入函数标签

1 个答案: