JS新手，将函数中的图片改写成html呈现
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS新手，将函数中的图片改写成html呈现相关的知识，希望对你有一定的参考价值。
这个是那个插件的js，原本是点击微博下方显示的图片然后弹出层，现在要把那个图片修改成html代码，可以自定义内容，不仅仅是一张图片而已。以前用的是common.js写好的imgLoader，现在要改写自己的，显示html.
应该就是去掉最后一个函数 this.buildAttach = function(data, plugData, dom, isTranspond)里面的imgLoader 然后写自己的代码。
我不了解JS，求各位大大帮忙！！！
下面是JS文件中的代码：
this.getContentHtml = function(data)
var html ='<div class="attach_detail">This is attach html position!</div>';
return html;
;
this.buildContent = function(val, data)
if(!data || data.length <= 0)return val;
var left = [];
if(val && val.length > 0)
for(var i in data)
var finded = false;
var d = data;
val.find("w_" + this.name + "[rel='"+ d.ind +"']").each(function()
finded = true;
var img = $(t.getContentHtml(d));
$(this).replaceWith(img);
);
if(!finded)left.push(d);
if(left.length > 0)
for(var i=0;i<left.length;i++)
var d = left;
var img = $(this.getContentHtml(d));
val.append(img);
return val;
;
this.buildAttach = function(data, plugData, dom, isTranspond)
for(var i=0;i<plugData.length;i++)
if(this.imgLoader == null)
this.imgLoader = new imgLoader(
byorder:true,
hideError:false,
autoShow:true
);
var d = plugData;
d.img = "/images/attach.png";
(function(d)
t.imgLoader.addItem(d.img, dom,
function(imgInfo)
if(t.mode == "timeline" || t.mode == "flow")
$(imgInfo.domimg).css("cursor", "pointer").click(function()
t.host.showAttachDetail(dom, null, data, isTranspond);
dom.append(t.getContentHtml(d, true));
);
, 180, 65, "zoom", d);
)(d);
this.host.attachLoaded(dom, 98);
return true;
;
无法将 API JSON 数据呈现到 vue js 中的表
【中文标题】无法将 API JSON 数据呈现到 vue js 中的表【英文标题】：Unable to render API JSON data to table in vue js 【发布时间】：2019-12-02 18:21:01 【问题描述】：我有这个从 API 获取数据并将其呈现到表中的 html 文件，它从那里成功地工作。
我正在尝试将 html 文件转换为 vue，但我遇到了一些问题，虽然 vue 可以从 API 获取数据，但它根本没有在网页上显示表格（尽管我已经导出了 JSONTable.vue 并将其导入到 App.vue 以便 App.vue 可以访问 JSONTable.vue 页面）
从我的 html 文件中，我使用了成功绘制表格的这两个外部资源：
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
但是我在标签中用这个替换了它，因为 vue 抛出模板错误，它修复了模板问题：
import JQuery from 'jquery'
let $ = JQuery
如何在 vue 中使用上面的外部样式表和脚本并允许我摆脱“import JQuery”（因为如果我删除 import JQuery，它会说 $ 未定义）？
我的 vue 网站：
<template>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <!-- styling the table with an external css file -->
<body>
<div class="container">
<div class="table-responsive">
<h1>JSON data to HTML table</h1>
<br />
<table class="table table-bordered table-striped" id="tracerouteTable">
<tr>
<th>id</th>
<th>name</th>
<th>salary</th>
<th>age</th>
<th>image</th>
</tr>
</table>
</div>
</div>
</body>
</head>
</template>
<script>
export default
name: 'JSONTable'
import JQuery from 'jquery'
let $ = JQuery
$(document).ready(function()
$.getJSON("http://dummy.restapiexample.com/api/v1/employees", function(data)
var employeeData = '';
console.log(data);
$.each(data, function(key, value)
employeeData += '<tr>';
employeeData += '<td>'+value.id+'</td>';
employeeData += '<td>'+value.employee_name+'</td>';
employeeData += '<td>'+value.employee_salary+'</td>';
employeeData += '<td>'+value.employee_age+'</td>';
employeeData += '<td>'+value.profile_image+'</td>';
employeeData += '<tr>';
);
$('#tracerouteTable').append(employeeData);
);
);
</script>
【问题讨论】：
【参考方案1】：其实，如果你在使用 Vue，你应该尽量避免使用 Jquery，在 99% 的情况下，这是没有必要的。
我创建了this example 来向您展示如何在没有 Jquery 的情况下做到这一点。只需注意两点：
OBS 1：这在此示例中不起作用，因为 CORS 不允许在此处加载此数据，因为我使用的是模拟数据
OBS 2：我正在使用 fetch 发出 http 请求，要使其在所有浏览器中都能正常工作，您必须使用像 github fetch 这样的 polyfill
const initialData = () =>
return Promise.resolve([
"id":"40877","employee_name":"Lexie","employee_salary":"3331","employee_age":"60","profile_image":"","id":"40878","employee_name":"Randi","employee_salary":"9608","employee_age":"29","profile_image":"","id":"40879","employee_name":"Wilber","employee_salary":"9626","employee_age":"58","profile_image":"","id":"40881","employee_name":"Jena","employee_salary":"3669","employee_age":"47","profile_image":"","id":"40882","employee_name":"Annetta","employee_salary":"8428","employee_age":"45","profile_image":"","id":"40883","employee_name":"Blaze","employee_salary":"9090","employee_age":"60","profile_image":"","id":"40884","employee_name":"Vida","employee_salary":"8633","employee_age":"54","profile_image":"","id":"40885","employee_name":"Tyrese","employee_salary":"1133","employee_age":"55","profile_image":"","id":"40888","employee_name":"Assunta","employee_salary":"8291","employee_age":"37","profile_image":"","id":"40889","employee_name":"Talon","employee_salary":"7896","employee_age":"35","profile_image":"","id":"40891","employee_name":"Selina","employee_salary":"6091","employee_age":"68","profile_image":"","id":"40892","employee_name":"Madyson","employee_salary":"2057","employee_age":"39","profile_image":""])
new Vue(
el: '#app',
data: function ()
return
list: []
,
mounted: async function ()
/*
OBS 1:this will not work in this example, because the CORS don't allow to load this data here
because that I'm using mocked data
OBS 2: I'm using fetch to make the http request, to make it works in all browser you have tu use a pollify
like https://github.com/github/fetch/
*/
//const response = await fetch("//dummy.restapiexample.com/api/v1/employees")
//this.list = await response.json()
this.list = await initialData()
)<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div id="app">
<div class="table-responsive">
<h1>JSON data to HTML table</h1>
<br />
<table class="table table-bordered table-striped" id="tracerouteTable">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>salary</th>
<th>age</th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.list">
<td>item.id</td>
<td>item.employee_name</td>
<td>item.employee_salary</td>
<td>item.employee_age</td>
<td>item.profile_image</td>
</tr>
</tbody>
</table>
</div>
</div>【讨论】：
“其实，如果你在使用 Vue，你应该尽量避免使用 Jquery，在 99% 的情况下，这是没有必要的。” - 我没有认为两者具有相同的目的，我不同意你的说法。特别是考虑到您必须通过实现fetch polyfill 来弥补 jQuery 的不足。不是说 jQuery 总是必要的，但我强烈反对“如果你使用 X，就不要使用 Y”。
可能在某些情况下 Jquery 可以提供帮助，有一些有趣的插件。如果您使用 Jquery 更改 DOM，您可能会遇到 vue 的问题，它不会对您的更改做出反应，这不是推荐的方式。而且，如果您不打算使用 Jquery 操作 DOM，那么使用整个 lib 来进行 ajax 调用并执行 foreach 循环（您可以在本机进行）是过大的。重点不是“如果你使用 X，就不要使用 Y”，问题只是将 Jquery 与 Vue/React/Angular/... /跨度>
感谢您的帮助，继续 OBS 2 如果我不使用 jquery，JavaScript 函数会是什么样子？需要定义项目和列表，但我不确定如何在代码中编写它。我也在使用来自这个 API 的没有 CORS 问题的数据：dummy.restapiexample.com/api/v1/employees
"如果我不使用 jquery，JavaScript 函数会是什么样子"：如果您使用 webpack 之类的工具进行捆绑，您只需安装 pollify 并将其添加到您的 main .js 文件。如果您没有使用任何捆绑工具，只是在 html 文件中添加脚本，则只需导入它，就像我在 codepen 示例中所做的那样。如果您的浏览器已经实现了 window.fetch，则 pollify 不会做任何事情。 “我也在使用来自这个 API 的没有 CORS 问题的数据”，如果您尝试将其加载到 codepen 或此处的 CORS 问题。
我已经导入了脚本，没有使用任何捆绑工具，但是表格仍然没有渲染。以上是关于JS新手，将函数中的图片改写成html呈现的主要内容，如果未能解决你的问题，请参考以下文章