将on js变量传递给onclick函数

时间:2017-07-05 07:23:19

标签: javascript html function variables dynamic

这让我发疯,我欢迎一些指导!

我正在构建动态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];       
}

但这会引发错误。

任何想法,我做错了吗?

由于

乔纳森

0 个答案:

没有答案