当我更改为不同的 class 名称时，getElementsByClassName 不起作用

Question

我查看了关于 getElementsByClassName 的大量 Stack Overflow 讨论，但似乎找不到任何可以帮助我解决这个特定问题的内容。解释。 . .

我有以下javascript

    field_to_update.innerHTML = '';

    var elOptNew = document.createElement('option');
    elOptNew.text = '---'
    elOptNew.value = '';

    field_to_update.add(elOptNew);

    field_to_update.options[0].selected = true;

    var track_names = document.getElementsByClassName('wpaudio');   

    for (i=0; i<track_names.length; i++) {
    
        var track_name = track_names[i].innerHTML;

        var elOptNew = document.createElement('option');
        elOptNew.text = track_name.replace("&amp;", "&");
        elOptNew.value = track_name;

        field_to_update.add(elOptNew); // standards compliant; doesn't work in IE

    }

我希望使用 var track_names = document.getElementsByClassName('wpaudio') 行提取音频文件列表的名称，该行引用了 wordpress 子主题的 functions.php 文件中包含的以下代码。

<ol id="audioFilesList" class="reactionFormAudio">
            <?php 
            // loop through rows (parent repeater)
            while( have_rows('song_upload') ): the_row(); ?>
               
               <li><p class="wpaudio" name="audioFileName"><?php the_sub_field('track_name'); ?></p><br>

以上场景运行良好。但是我决定不使用上面列出的音频文件的有序列表 - 而是使用可以在 wordpress post 中创建的默认音频播放列表，它产生以下代码：

<div class="wp-playlist-tracks">
    <div class="wp-playlist-item wp-playlist-playing">
        <a class="wp-playlist-caption" href="https://www.futureproofpromotions.com/wp-content/uploads/2020/09/01_WhereToBegin-128.mp3">
            1. 
                <span class="wp-playlist-item-title">
                “Where To Begin”                </span>
                <span class="wp-playlist-item-artist"> — Alice Clayton</span>
        </a>
        <div class="wp-playlist-item-length">2:57</div>
    </div>
    <div class="wp-playlist-item">
        <a class="wp-playlist-caption" href="https://www.futureproofpromotions.com/wp-content/uploads/2020/09/02_BeingAlone-128.mp3">
            2. 
                <span class="wp-playlist-item-title">
                “Being Alone”               </span>
                <span class="wp-playlist-item-artist"> — Brosnan</span>
        </a>
        <div class="wp-playlist-item-length">3:15</div>
    </div>      
    </div>
</div>

但是，当我将 javascript 行从 document.getElementsByClassName('wpaudio'); 换成 document.getElementsByClassName('wp-playlist-caption'); 以便在新的 html 中引用不同的 class 名称时, 它不显示任何名称！

我确实是 javascript 的新手，所以这对于精通该语言的人来说可能是显而易见的，但我对 php.

的了解确实有限

有人能解释一下为什么当我在上面的场景中更改 class name/reference 时我没有显示名字吗？

仅供参考，我也尝试将 document.getElementsByClassName() 更改为 document.querySelectorAll()，这在引用原始 class（'.wpaudio'）时也很有效 - 但在引用时再次没有结果('.wp-playlist-caption') 或嵌套在其中的任何其他 class 名称（例如 .wp-playlist-item-title 或 .wp-playlist-item-artist）。

如能提供上述任何帮助，我们将不胜感激

Answer 1

由于 wp-playlist-caption 有多个嵌套元素，您可以查询每个元素并将它们串在一起，或者采用懒惰的方法并使用 .innerText。这将提取元素及其子元素内呈现的明文。

// Wait until the page has loaded
document.addEventListener('DOMContentLoaded', () => {
  var field_to_update = document.getElementById('reactionForm_strongestTrack');
  field_to_update.innerHTML = '';
  var elOptNew = document.createElement('option');
  elOptNew.text = '---'
  elOptNew.value = '';
  field_to_update.add(elOptNew);
  field_to_update.options[0].selected = true;

  // Search for all playlist-captions inside the playlist-tracks list.
  // 'Currently playing' has a playlist-caption too, 
  // limiting to the tracklist excludes it
  document.querySelectorAll('.wp-playlist-tracks .wp-playlist-caption')
    .forEach( // The following arrow function will be called for each element
      track => {
        // There are nested elements but we just want the plaintext    
        let track_name = track.innerText;
        // Create a new element and append to the select as before
        let elOptNew = document.createElement('option');
        elOptNew.text = track_name.replace("&amp;", "&");
        elOptNew.value = track_name;

        field_to_update.add(elOptNew);
      });
});

arrow functions 的额外参考。

当我更改为不同的 class 名称时，getElementsByClassName 不起作用

getElementsByClassName not working when I change to different class name

javascript

php

wordpress

getelementsbyclassname