Question

我有一个名为train的州。
我从API获取JSON文件并使用this.setState({train: json})将JSON文件设置为state.train。

在州列车中，有route_name和advisory_message：

{
"route_name": "Warminster",
"advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>"
}

我如何更改advisory_message值的部分内容？例如，更改href？

非常感谢你。

Answer 1

您可以使用JQuery轻松解析json中的html，然后在更改href后设置状态。这是一个例子。

var myJSON = {
"route_name": "Warminster",
"advisory_message": "<div class=\"fares_container\">\n\t\t\t\t <p>Customers should review the service information below as trains operating to Center City and continuing to Airport Terminals will depart <strong>EARLIER <\/strong>than regularly scheduled at <strong>Warminster, Hatboro, Crestmont, Roslyn, Ardsley, Glenside, and Jenkintown-Wyncote stations<\/strong>.<\/p>\n<p><span style=\"font-size: small;\"><strong>Inbound (toward Center City) Service:<\/strong><\/span><\/p>\n<p>Download the <a title=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" href=\"\/alert\/pdf\/2017-11-war-inbound-timetable.pdf\" target=\"_blank\">PDF Sunday, October 29th Warminster timetable<\/a> or click on the image below to enlarge.<\/p>\n<p><a title=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" href=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" target=\"_blank\"><img src=\"\/alert\/images\/2017-10-war-sunday-inbound.jpg\" alt=\"INBOUND (toward Center City and continuing to Airport Terminals October 29, 2017 timetable\" width=\"725\" height=\"224\" \/><\/a><\/p>\n<ul>\n<\/ul>\n<p>AM Trains <strong>#403, #405, and #407<\/strong> will depart Glenside Station at the regularly scheduled times<\/p>\n<ul>\n<\/ul>\n<<\/div>"
};
var msg = myJSON.advisory_message;
var $advisoryHTML = $(msg,{html:msg});
var anchors = $("a", $advisoryHTML);
//change href of first anchor
console.log("old href is: " + $(anchors[0]).attr("href"));
$(anchors[0]).attr("href", "/my/new/href");
console.log("NEW href is: " + $(anchors[0]).attr("href"));
// put the modified html back into the json object
myJSON.advisory_message= $advisoryHTML.html();
//this.setState({train: myJSON})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

如何修改反应状态

1 个答案: