javascript - 在 JavaScript 中向下钻取一个 obj 以获取数据

Question

基本上，我很难将数据从数据类型获取到 DOM 中。我想要的是来自数组的 src 值来填充 DOM 中的 img 标签

HTML:

<div id="container-fluid--secondary" class="container-fluid container-fluid--secondary">
   <section class="a">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px" alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
   <section class="b">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
</div>

JS:

var videos = {
    'a': [
        {
            'name': 'a',
            'src': 'https://foo/video/'
        },
        {
            'name': 'b',
            'src': 'https://bar/video/'
        },
        {
            'name': 'c',
            'src': 'https://baz/video/'
        }
    ],
    'b': [
        {
            'name': 'a',
            'src': 'https://fizz/video/'
        },
        {
            'name': 'b',
            'src': 'https://buzz/video/'
        },
        {
            'name': 'c',
            'src': 'https://blargh/video/'
        }
    ]
},

 containerFluidSecondary = document.getElementById('container-fluid--secondary'),
   videoNames = Object.keys(videos);     

        containerFluidSecondary.querySelectorAll('section')
        .forEach(function(section, i){
         if (section.className == videoNames[i]) {
            var videoContainer = Array.prototype.slice.call(section.getElementsByClassName('video-container')[0].children);

            videoContainer.forEach(function(img, i){
              for (var videoCategory in videos){
                console.log('videoCategory', videoCategory[i][i])
              }
            })
         }})

Answer 1

videoCategory 的值为 "a" 或 "b"。因此，videoCategory[i][i] 没有意义。

看起来像你想要的:

containerFluidSecondary.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

var videos = {
    'a': [
        {
            'name': 'a',
            'src': 'https://foo/video/'
        },
        {
            'name': 'b',
            'src': 'https://bar/video/'
        },
        {
            'name': 'c',
            'src': 'https://baz/video/'
        }
    ],
    'b': [
        {
            'name': 'a',
            'src': 'https://fizz/video/'
        },
        {
            'name': 'b',
            'src': 'https://buzz/video/'
        },
        {
            'name': 'c',
            'src': 'https://blargh/video/'
        }
    ]
};

document.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

document.querySelectorAll('section').forEach(function(section){
  section.querySelectorAll('img').forEach(function(img, i) {
    img.src = videos[section.className][i].src;
  });
});

<div id="container-fluid--secondary" class="container-fluid container-fluid--secondary">
   <section class="a">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px" alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
   <section class="b">
      <div class="video-container">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
         <img class="video-container__thumbnail" src="https://via.placeholder.com/250x141.png?text=Video Thumbnail 250px x 141px"
            alt="Video thumbnail">
      </div>
   </section>
</div>