Question

我想编写AJAX调用，将XML解析为Javascript对象，然后显示Javascript对象。我需要创建表。第一列将显示视频列表，第二列将显示特定视频的详细信息。除了一件事，一切都很好。我无法更改每一行的视频图像和链接。我尝试了不同的方法，但只有第一个链接和图像在重复。

我知道逻辑上有问题，但是我没有找到正确的方法。

function display(resultObj){
 var html = "<table border='0'>";
 html += "<tr><th></th></tr>"+"<br>";
 for(var i=0; i<resultObj.itemArray.length; i++){
   var video = resultObj.itemArray[i];
   html += "<tr>";
   html +="<td>" + "<a href='https://www.youtube.com/watch?v=kbKtFN71Lfs' 
   target='_blank'>" + 
   "<img src='https://i.ytimg.com/vi/kbKtFN71Lfs/maxresdefault.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=SjIHB8WzJek' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=YCXmUi56rao' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/YCXmUi56rao/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=aQxCnmhqZko' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=jPcBU0Z2Hj8' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg' 
   style='width:200px;height:200px;'></td>" +;

   html += "<td><br>" + "<p style='color:red;font-family:courier;font- 
   size:25px;'>"      + video.title        +
   "</p>"             + video.channel      + 
   "<br>"             + video.view         + 
   " views"           + "<br><mark>"       +
   video.length       + "</mark>";

   html += "</tr>";
 }
   html += "</table>";
   html += "</table>";
   var resultDiv = document.getElementById("Sresult");
   resultDiv.innerHTML = html;
  }

Answer 1

我已经通过使用switch语句解决了我的问题：现在工作正常。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const Books = () => {
    let google = window.google;
    return (
        <div id="map" style={{ height: "500px" }}>
        {google.books.load()}
        {google.books.setOnLoadCallback(function initialize() {
            let viewer = new google.books.DefaultViewer(
            document.getElementById("map")
            );
        viewer.load("ISBN:1491918039");
        })}
    </div>
    );
};

class App extends React.Component {
    state = {
        show: false
    };

    showBook = () => {
        let val = this.state.show;
        this.setState({
            show: !val
        });
    };

    render() {
        let disp = null;
        if (this.state.show) {
            disp = <Books />;
        } else {
            disp = null;
        }
        return (
            <div className="App">
                <button onClick={this.showBook}>click me</button>
                {disp}
            </div>
        );
    }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何根据每次迭代在for循环中更改图像

1 个答案: