这让我发疯,我欢迎一些指导!
我正在构建动态div,它通过循环遍历json数组来构建div。
div有一个按钮,用于启动我需要将变量传递给的模态表单。这是构建div的代码: -
function buildFeed(feed){
let resultsbox = '<h3>Latest Posts</h3>';
for(let i in feed.data){
if(feed.data[i].message){
var postid = feed.data[i].id;
var title = feed.data[i].name;
if (typeof(title) == 'undefined') {
var title = feed.data[i].type;
} else {
var title = feed.data[i].name;
}
var pmsg = feed.data[i].message;
var link_fb = feed.data[i].permalink_url;
var link_source = feed.data[i].link;
var pd = feed.data[i].created_time;
var postdatetime = new Date(pd);
var te = moment(pd).fromNow();
var pdate = postdatetime.toLocaleDateString();
var ptime = postdatetime.toLocaleTimeString();
var imageresize = "https://process.filestackapi.com/werfeurweur3^7ef/resize=width:550,height:350,fit:crop,align:center/";
var pimage = imageresize + feed.data[i].full_picture;
var cnt_likes = feed.data[i].like.summary.total_count;
var cnt_comments = feed.data[i].comments.summary.total_count;
var shares = feed.data[i].shares;
if (typeof(shares) == 'undefined') {
var cnt_shares = 0;
} else {
var cnt_shares = feed.data[i].shares.count;
}
ARRAY OF VARIABLES THAT I NEED FOR THE MODAL
var modalarray = [title,pmsg,link_source];
//REPEATABLE DIVS ARE BUILT HERE
resultsbox += `<div class="col-md-3">
<div class="thumbnail">
<div class="media no-margin-top content-group">
<div class="media-body">
<div class="media-annotation mt-5"><i class="icon-watch2 position-left"></i><strong>${te}</strong> | ${pdate} ${ptime}</div>
</div>
<div class="media-left media-middle">
<i class="icon-camera text-orange-300 opacity-75"></i>
</div>
</div>
<h6 class="headline">${title}</h6>
<!-- tabbable -->
<div class="tabbable">
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">
<a href="#icon-only-tab1-${postid}" title = "summary" data-toggle="tab" aria-expanded="true">
<i class="icon-menu7"></i>
<span class="visible-xs-inline-block position-right">Post Details</span>
</a>
</li>
<li class="">
<a href="#icon-only-tab2-${postid}" title = "detail" data-toggle="tab" aria-expanded="false">
<i class="icon-menu9"></i>
<span class="visible-xs-inline-block position-right">Statistics</span>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="icon-only-tab1-${postid}">
<div class="thumb">
<img src="${pimage}" alt="">
<div class="caption-overflow">
<span>
<a href="${link_source}" class="btn bg-orange-300 btn-rounded btn-icon" title = "Source link" target="_blank"><i class="icon-link"></i></a>
<a href="${link_fb}" class="btn bg-orange-300 btn-rounded btn-icon" title = "Facebook link" target="_blank"><i class="icon-facebook2"></i></a>
//HERE'S MY PROBLEM
<button type="button" class="btn btn-default btn-sm legitRipple" data-toggle="modal" data-target="#modal_default" onclick="createmodal([PASS ARRAY HERE])">View Post <i class="icon-play3 position-right"></i></button>
</span>
</div>
</div>
<div class="postmessage">
${pmsg}
</div>
<div class="panel-footer panel-footer-transparent">
<li data-popup="tooltip" title="Engagements" class="btn heading-btn"><i class="icon-heart6 position-left"></i> ${cnt_likes}<//li>
<li data-popup="tooltip" title="Comments" class="btn heading-btn"><i class="icon-comment-discussion position-left"></i> ${cnt_comments}<//li>
<li data-popup="tooltip" title="Shares" class="btn heading-btn"><i class="icon-share3 position-left"></i> ${cnt_shares}<//li>
</div> <!-- End of footer -->
</DIV>
<div class="tab-pane" id="icon-only-tab2-${postid}">
${pmsg}
</div>
</DIV>
</DIV>
</div> <!-- End of thumbnail -->
</div> <!-- End of BOX -->`;
}
}
document.getElementById('results').innerHTML = resultsbox;
}
我无法将modal_array传递给模态启动按钮的onlick函数。
我试过像这样传递数组: -
<button type="button" class="btn btn-default btn-sm legitRipple" data-toggle="modal" data-target="#modal_default" onclick="createmodal(${modal_array})">View Post <i class="icon-play3 position-right"></i></button>
像这样: -
<button type="button" class="btn btn-default btn-sm legitRipple" data-toggle="modal" data-target="#modal_default" onclick="createmodal('${modal_array}')">View Post <i class="icon-play3 position-right"></i></button>
像这样: -
<button type="button" class="btn btn-default btn-sm legitRipple" data-toggle="modal" data-target="#modal_default" onclick="createmodal(modal_array)">View Post <i class="icon-play3 position-right"></i></button>
然后我有了试图像这样更新模态形式的函数: -
function createmodal(modalarray) {
document.getElementById('mod_title').innerHTML= modal_array[0];
document.getElementById('mod_message').innerHTML= modal_array[1];
}
但这会引发错误。
任何想法,我做错了吗?
由于
乔纳森