Question

我正在使用纯Javascript创建视频页面（我没有其他选项），我正在尝试将视频标题分配给相应的视频。我有类别，图像和网址按照我需要的方式工作，但坚持标题部分。我的代码缺少在哪里？下面是对象和我的代码的示例。

var all_videos = {

    "cats": [
    {"cat": "Obstetrics and Pediatrics",
    "titles":[ "American Academy of Pediatrics 10 Year Tribute - Stronger
    Together",
    "Preterm Birth Facts - How are you training to prepare for premature
    births?",
    "Born Too Soon","Preparing for the Unexpected (SimMom/Maternal
    Promo)"],
    "codes":[ "PH1O54WuJ88","pp9vqoyQ9xU","JjZj8D7yx00"]},

    {"cat": "Nursing and Patient Care",
    "titles":[ "National Nurses Week and National Hospital Week 2017",
    "The July Effect",
    "Raising the Bar for Simulation in Nursing Education (Nursing Anne .
    [![enter image description here][1]][1]Simulator Teaser)",
    "Simulation for Nursing Education - A Better Way to Train (Nursing
    Anne Simulator Teaser)],
    "codes":[ "tTBXDqgJCXU","sRp6Ui5ibC8","7cMZ19aSTX8","wXLKyUMXGNI"]}
    ]
}

all_videos.cats.forEach(function(allcats) {

    var main = document.createElement("div");

    var catdiv = document.createElement("div");

    catdiv.textContent = allcats.cat;

    main.appendChild(catdiv);

    allcats.codes.forEach(function(code) {

        var viddiv = document.createElement("div");

        main.appendChild(viddiv);

        var titlebox = document.createElement("div");

        titlebox.textContent = allcats.titles;

        var images = document.createElement("img");
        images.setAttribute("src", "vids/"+code+".png");
        images.setAttribute("style", "width: 300px;");

        viddiv.appendChild(images);

        var link = document.createElement('a');
        link.setAttribute("href", "video.html?"+code+"&source=youtube");
        link.appendChild(images);

        viddiv.appendChild(link);
        viddiv.appendChild(titlebox);

        document.getElementById("showvids").appendChild(main);
    });
});

Answer 1

我认为你正在发送一系列标题......

"titles":[ "American Academy of Pediatrics 10 Year Tribute - Stronger     
Together",
"Preterm Birth Facts - How are you training to prepare for premature 
births?",
"Born Too Soon","Preparing for the Unexpected (SimMom/Maternal Promo)"],

..所以你需要使用join。

titlebox.textContent = allcats.titles.join(', ');

这应该将您的标题设置为： American Academy of Pediatrics 10 Year Tribute - Stronger Together, Preterm Birth Facts - How are you training to prepare for premature births?, Born Too Soon, Preparing for the Unexpected (SimMom/Maternal Promo)

如果您想将其设置为您可以执行的第一个标题

titlebox.textContent = allcats.titles[0];

这会给你

American Academy of Pediatrics 10 Year Tribute - Stronger Together

Answer 2

根据上面的评论，我假设您希望title与foreach中的当前code相关联。

在foreach中，您也可以将index添加为参数（https://www.w3schools.com/jsref/jsref_forEach.asp）

所以你可以这样更新你的代码：

allcats.codes.forEach(function(code, index) { //Add Index
    var viddiv = document.createElement("div");

    main.appendChild(viddiv);

    var titlebox = document.createElement("div");

    titlebox.textContent = allcats.titles[index]; //Add index - Note: this does assume that titles is the same length or longer than codes
    var images = document.createElement("img");
    images.setAttribute("src", "vids/"+code+".png");
    images.setAttribute("style", "width: 300px;");

    viddiv.appendChild(images);

    var link = document.createElement('a');
    link.setAttribute("href", "video.html?"+code+"&source=youtube");
    link.appendChild(images);

    viddiv.appendChild(link);
    viddiv.appendChild(titlebox);

    document.getElementById("showvids").appendChild(main);
});

如何从对象中获取标题并将其应用于我的视频？

2 个答案: