如何将每个标题属性转换为输入标签的值？

Question

我试图将每个标题属性抓取到输入标签的值中，但我尝试了很多方法，但都失败了，我什至尝试使用 for() 进行循环。

例如，这是我在添加 javascript 之前的代码

<div class="all">

  <div class="myOtherClass">

    <a class="getTitle test" href="#" Title="i want grab this title">click me to change</a>

  </div>

  <div class="myOtherClass">

    <a class="getTitle test" href="#" Title="i want grab this too">click me to change</a>

  </div>

  <div class="myOtherClass">

    <a class="getTitle test" href="#" Title="same at 2 other">click me to change</a>

  </div>

  <div class="Otherclass">

    <input class="myInput" type="button" value=""/>

  </div>

</div>

这就是我试图做的

let getTitle = document.querySelectorAll('.getTitle').forEach((f) => {

    f.addEventListener('click', function() {

     document.querySelectorAll('.all').forEach(item =>{

      let button = item.querySelector('.getinput')          

      let a = item.querySelectorAll('.test');

       for(let i=0; i < a.length; i++){

          let atitle = a[i];

          button.value = atitle.title; 

        }

       })

      })

     }) 

这是我希望我的代码在添加 javascript 后所做的

当我点击第一个标签时，将返回输入中的值是

<input class="myInput" type="button" value="i want grab this title"/>

当我点击第二个标签时，标签将返回这个值

<input class="myInput" type="button" value="i want grab this too"/>

但我做的结果就是这样

当我点击第一个标签时，输入的值是

<input class="myInput" type="button" value="i want grab this title"/>

当我点击第二个 a 标签时，它返回与第一个 a 标签相同的值

<input class="myInput" type="button" value="i want grab this title"/>

有没有办法解决这个解决方案？

Answer 1

您可以在每个锚标记上使用事件侦听器，并通过ID设置输入的值，您需要相应地更改它：const elements = document.getElementsByClassName('getTitle')const input = document.getElementById('[change_this]')Array.from(elements).forEach(a => {&nbsp; a.addEventListener('click', (el) => {&nbsp; &nbsp; input.value = el.target.title&nbsp; })})<div class="all">&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle test" Title="i want grab this title">click me to change</a>&nbsp; </div>&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle test" Title="i want grab this too">click me to change</a>&nbsp; </div>&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle test" Title="same at 2 other">click me to change</a>&nbsp; </div>&nbsp; <div class="Otherclass">&nbsp; &nbsp; <input id="[change_this]" class="myInput" type="button" value="" />&nbsp; </div>

Answer 2

从什么可以理解到你做什么：document.querySelectorAll('.getTitle').forEach( Z_elm => {&nbsp; Z_elm.addEventListener('click', function () {&nbsp; &nbsp; document.querySelector('.myInput').value = this.title;&nbsp; &nbsp; // or : (in your real code)&nbsp; &nbsp; // document.querySelector('#myModal .getinput').value = this.title;&nbsp; })})a {cursor: pointer;}<div class="all">&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle" Title="i want grab this title">click me to change</a>&nbsp; </div>&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle" Title="i want grab this too">click me to change</a>&nbsp; </div>&nbsp; <div class="myOtherClass">&nbsp; &nbsp; <a class="getTitle" Title="same at 2 other">click me to change</a>&nbsp; </div>&nbsp; <div class="Otherclass">&nbsp; &nbsp; <input class="myInput" type="button" value=""/>&nbsp; </div></div>