如何使用类获取跨度内的文本。 （for循环内部）

Posted 2023-05-07

【中文标题】如何使用类获取跨度内的文本。 （for循环内部）

【英文标题】：How to get a text inside of a span with a class. (inside of for loop)

【发布时间】：2017-10-09 20:37:48

【问题描述】：

我想在具有move 类的跨度内获取文本。所以我试图让当你点击按钮时，它在类移动中的文本作为参数之一传递给函数move。 p.s.给出了 html 代码，我无法对其进行任何更改。我的js代码有问题吗？错误消息显示“Uncaught TypeError: Cannot read property 'innerHTML' of undefined”。

部分 HTML 代码；

 <div id="my-card">


    <div class="card-container">
      <div class="card">
        <div class="moves">
          <button>
            <span class="move">a</span> <span class="dp"></span>
            <img src="icons/fighting.jpg"  />
          </button>
          <button>
            <span class="move">b</span> <span class="dp"></span>
            <img src="icons/fighting.jpg"  />
          </button>
          <button>
            <span class="move">c</span> <span class="dp"></span>
            <img src="icons/fighting.jpg"  />
          </button>
          <button>
            <span class="move">d</span> <span class="dp"></span>
            <img src="icons/fighting.jpg"  />
          </button>
        </div>
        <img src="icons/fighting.jpg"  class="weakness" />
      </div>
    </div>
  </div>

javascript：

   for(var i=0; i<4; i++)
               document.querySelectorAll("#my-card .moves button")[i].onclick = function() move(document.querySelectorAll("#my-card .moves .move")[i].innerHTML, gameID, playerID) ;
     

【问题讨论】：

你忘记关闭 (</span>) 你的一些 <span>s

【参考方案1】：

试试这个

 for(var i=0; i<4; i++)
    document.querySelectorAll("#my-card .moves button")[i].onclick = 
       function() move(this.querySelectorAll(".move")[0].innerHTML, gameID, playerID) ;
 

我将您的 document.querySelectorAll 切换为 this.querySelectorAll。

下面是一个向控制台显示结果的 sn-p。

for (var i = 0; i < 4; i++) 
  document.querySelectorAll("#my-card .moves button")[i].onclick = function() 

    console.log(this.querySelectorAll(".move")[0].innerHTML)

  

<div id="my-card">


  <div class="card-container">
    <div class="card">
      <div class="moves">
        <button>
          <span class="move">a</span> <span class="dp"></span>
          <img src="icons/fighting.jpg"  />
        </button>
        <button>
          <span class="move">b</span> <span class="dp"></span>
          <img src="icons/fighting.jpg"  />
        </button>
        <button>
          <span class="move">c</span> <span class="dp"></span>
          <img src="icons/fighting.jpg"  />
        </button>
        <button>
          <span class="move">d</span> <span class="dp"></span>
          <img src="icons/fighting.jpg"  />
        </button>
      </div>
      <img src="icons/fighting.jpg"  class="weakness" />
    </div>
  </div>
</div>

【讨论】：

抱歉，您的代码有效，但我想知道为什么我必须使用 0 作为 'this.querySelectorAll(".move")[0].innerHTML' 中的索引。你为什么不用我？？

因为i在按钮上，设置点击事件。 this 在单击按钮后被调用。此时它会查询您的选择器，可能有几个，所以我们选择第一个。

哦，我明白了。非常感谢！