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

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

  a.addEventListener('click', (el) => {

    input.value = el.target.title

  })

})

<div class="all">

  <div class="myOtherClass">

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

  </div>

  <div class="myOtherClass">

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

  </div>

  <div class="myOtherClass">

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

  </div>

  <div class="Otherclass">

    <input id="[change_this]" class="myInput" type="button" value="" />

  </div>

Answer 2

从什么可以理解到你做什么：

document.querySelectorAll('.getTitle').forEach( Z_elm => {

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

    document.querySelector('.myInput').value = this.title;

    // or : (in your real code)

    // document.querySelector('#myModal .getinput').value = this.title;

  })

})

a {cursor: pointer;}

<div class="all">

  <div class="myOtherClass">

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

  </div>

  <div class="myOtherClass">

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

  </div>

  <div class="myOtherClass">

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

  </div>

  <div class="Otherclass">

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

  </div>

</div>