单击父元素时获取html第三个子元素id

Question

我使用Html生成该代码：

<td align="center">
  <div class="popup" onclick="ChooseImageToolTip(this)">
      <a class="btn btn-default">
        <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id=@TableRowId>A Simple Popup!</span>
        </span>
     </a>
  </div>
</td>

我需要获取class =“popuptext”span元素的id，并在ChooseImageToolTip（）javascript函数中处理它。 我将div元素传递给函数。

Answer 1

您正在传递对包含该元素的div的引用。因此，在您的函数中，您可以使用querySelector查找.popuptext元素，并阅读其id属性：

function ChooseImageToolTip(element) {
    alert("ID: " + element.querySelector(".popuptext").id);
}

直播示例：

＆＃13;

＆＃13;

function ChooseImageToolTip(element) {
  alert("ID: " + element.querySelector(".popuptext").id);
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td align="center">
        <div class="popup" onclick="ChooseImageToolTip(this)">
          <a class="btn btn-default">
            <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id="row1">A Simple Popup!</span>
            </span>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <td align="center">
        <div class="popup" onclick="ChooseImageToolTip(this)">
          <a class="btn btn-default">
            <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id="row2">A Simple Popup!</span>
            </span>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <td align="center">
        <div class="popup" onclick="ChooseImageToolTip(this)">
          <a class="btn btn-default">
            <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id="row3">A Simple Popup!</span>
            </span>
          </a>
        </div>
      </td>
    </tr>
    <tr>
      <td align="center">
        <div class="popup" onclick="ChooseImageToolTip(this)">
          <a class="btn btn-default">
            <span class="glyphicon glyphicon-picture">
           <span class="popuptext" id="row4">A Simple Popup!</span>
            </span>
          </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以从其类中获取元素ID。

 <span class="popuptext" id="abc">A Simple Popup!</span>    
 <script>
 var x = document.querySelector('.popuptext').id;
 console.log(x); //Would print abc
 </script>