如何在一个动态的div中放值或者html页面（handlebars）

最新推荐文章于 2024-11-06 10:54:20 发布

一名奋斗的程序猿

最新推荐文章于 2024-11-06 10:54:20 发布

阅读量731

点赞数

分类专栏： JS 文章标签： j's

本文链接：https://blog.csdn.net/qq_35069673/article/details/88970089

版权

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在动态div中利用Handlebars模板引擎根据用户选择的HTML片段和栏目进行内容填充。通过监听栏目点击事件，将选中栏目的数据传递到隐藏域，并在用户选择HTML模块时，将模块内容插入相应栏目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：要将数据或者html片段放入多条栏目的其中一条中（点击对应的栏目然后点击html按钮时都在那个栏目中操作）

1.这里时勾选动作
$(document).on("click","input",function() { let value = $(this).val(); //字段值 let temp = $(this).parents(".field-info").prev(".field-name").attr("id"); for (var i=0;i<checkboxTemp.length; i++){ if(checkboxTemp[i].value === temp){ var box = checkboxTemp[i].content; console.log(box); //存放某个模板里选中的复选框 name值 for (var j=0;j<box.length;j++){ if(box[j].label === value){ box[j].checked = box[j].checked === false; } } } } renderEditTemp(json); });

2.勾选需要的html片段

 function renderEditTemp(list){
             let tpl_field = require('../views/product-field-manage/tpl/template-edit-minchange.tpl');
             var temp_edit = Handlebars.compile(tpl_field);
            var html_edit = temp_edit(list);
            var templateNeedId = $("#hiddenTemplateId").val();
             $('div').find('.template-title').each(function () {
                 var id  = $(this).attr("id");
                 if (id==templateNeedId){
                     $(this).next("div").html(html_edit);
                 }
             });

            dragSort();/*用来调用拖拉的函数*/
        }

3.对应的栏目：

{{#each json}}
{{#each data}}
    <div id="">
        <div class="template-title" id="{{dictionary}}">{{category}}<i class="iconfont  J_tempDelete" style="margin: 0;color: #EE4451;font-size: 16px">&#xe65c;</i></div>
            <div class="block-box" style="margin-bottom:0px"  id="mincategory">
        </div>
    </div>
{{/each}}

{{/each}}

步骤：
1.先将点击栏目设置监听，当对应栏目被点击时，将其中具有特殊性的数据传到一个隐藏域中：

 //设置模板的监听
        //用来存放每次点击之后模板的id
        var templatetitle;
        $(document).on("click",".template-title",function(){
            var id=$(this).attr("id");
            $("#hiddenTemplateId").val(id);   //放置在一个html中的隐藏域中
           // console.log (id)
            templatetitle=id;
        });

2.当勾选模块时，要选择放置对应的html的元素：

 function renderEditTemp(list){
             let tpl_field = require('../views/product-field-manage/tpl/template-edit-minchange.tpl');
             var temp_edit = Handlebars.compile(tpl_field);
            var html_edit = temp_edit(list);
//这里开始就是获取那个对应栏目div的过程
             //1.获取隐藏域中的值
            var templateNeedId = $("#hiddenTemplateId").val();
            //利用循环寻找class为.template-title的div，当找到对用栏目的div时，将对应的tpl放入即可
             $('div').find('.template-title').each(function () {
                 var id  = $(this).attr("id");
                 if (id==templateNeedId){
                     $(this).next("div").html(html_edit);
                 }
             });

            dragSort();/*用来调用拖拉的函数*/
        }