如何使用 if /else 或 swtich/case 条件动态添加 HTML-解网

问：

我想做什么：

我想创建一个 html 代码生成器。这个想法是能够创建一个电子邮件骨架，用户可以通过输入修改某些数据，例如文档的标题、块的大小等。页面加载后立即出现一个 html 块。然后，用户可以单击按钮添加其他 html 块。

我设法做到了：

现在，经过几次尝试，我得出了一个确定的结果：当页面加载时，我可以修改生成的代码中的变量。我可以在单击按钮时添加html块。

用户可以设置大小，然后单击按钮，定义的尺寸将显示在块的宽度属性中。但是，如果我在不单击按钮的情况下更改大小，则不会更新这些动态块上的宽度属性。

我想做的是能够通过直接修改输入来修改这些动态 html 块上的“width”变量。目前，“宽度”字段的更新仅修改默认内容的宽度值。

我在这里放了一个最小的代码来重现我面临的错误并显示我在哪里。欢迎任何帮助，尤其是改进代码

代码：

var id='';
    var component='';
    var title ='' ;
    var width = '';
    $('.component').on('click',function(){
        id= $(this).attr('id');
             switch(id){
           case 'block_one':      
            component+= '<div style="width:'+width+'px"><p>Lorem</p></div>';
            break;
            case 'block_two':
            component += '<div style="width:'+width+'px"><p>my second block</p></div>'; 
            break
        }           
    })
    
    function build_page() { 
         title = $('#title').val();
        width = $('#width').val();
        var code='<!DOCTYPE html>\n'
            +' <html>\n'
            +' <head>\n'
            +'  <title>'+title+'</title>\n'
            +' </head>\n'
            +' <body>\n'
            +' <div>\n'
            +'<h1>This is my title page : '+title+'</h1>\n'
            +'<div style="width:'+width+'px"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n'
            +' tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n'
            +' quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n'
            +' consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n'
            +' cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n'
            +' proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>\n'
        
            code += component;  
            code +=' </body>\n'
            +' </html>'
            $('#output').html(code);
    }
    build_page();
    
    $( "input, select" ).on('change',function() {           
        build_page();
    });
    $('button').on('click', function() {
        build_page();
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <aside>
      <div>
        <label for="title">Title</label>
        <input type="text" name="title" id="title" value="Mytitle">
      </div>
      <div>
        <label for="width">Width</label>
        <input type="number" name="width" id="width" value="600">
      </div>
      <div id="component-filter">
        <button type="button" class="component" id="block_one">add first block</button>
        <button type="button" class="component" id="block_two">add second block</button>
      </div>
  </aside>
  <div class="wrapper">
    <div id="output"></div>
  </div>
</body>

如果我在我的函数中插入条件，使用开关/大小写或 if/else，它可以工作，但中途。我可以通过更改相应的输入来更改大小，但是现在当我单击按钮添加块时，它会替换前一个，而不是添加。任何帮助将不胜感激！

var id='';
var component='';
var title ='' ;
var width = '';
$('.component').on('click', function(){
    id= $(this).attr('id');
})

function build_page() { 
    title = $('#title').val();
    width = $('#width').val();
    var code='<!DOCTYPE html>\n'
        +' <html>\n'
        +' <head>\n'
        +'  <title>'+title+'</title>\n'
        +' </head>\n'
        +' <body>\n'
        +' <div>\n'
        +'<h1>This is my title page : '+title+'</h1>\n'
        +'<div style="width:'+width+'px"><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n'
        +' tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n'
        +' quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n'
        +' consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n'
        +' cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non\n'
        +' proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>\n'
         switch(id){
            case 'block_one':     
            code += '<div style="width:'+width+'px"><p>Lorem</p></div>';
            break;
            case 'block_two':
            code += '<div style="width:'+width+'px"><p>my second block</p></div>'; 
            break
        }
            
        code +=' </body>\n'
        +' </html>'
        $('#output').html(code);
}
build_page();

$( document).on('input','input,select', function() {          
    build_page();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <aside>
      <div>
        <label for="title">Title</label>
        <input type="text" name="title" id="title" value="Mytitle">
      </div>
      <div>
        <label for="width">Width</label>
        <input type="number" name="width" id="width" value="600">
      </div>
      <div id="component-filter">
        <button type="button" class="component" id="block_one">add first block</button>
        <button type="button" class="component" id="block_two">add second block</button>
      </div>
  </aside>
  <div class="wrapper">
    <div id="output"></div>
  </div>
</body>

html jquery insert switch-statement

0赞 freedomn-m 9/8/2023

添加一些自由/等，以便您可以看到正在发生的事情并更好地了解事件的运作方式。您的点击事件在生成时不会（也不能）执行，因此在稍后运行时不会执行任何操作。将事件移到外部（它所属的位置），看看它是否仍然有意义。console.log("start")console.log("component click").componentcodebuild

0赞 blogob 9/8/2023

实际上，当单击按钮时，应该将 html 块添加到代码变量中，但事实并非如此。在控制台中，块被添加到模板的最末尾（在 body 标签之后），而我没有附加功能。虽然它出现在控制台中，但它在前面并不突出。

答： 暂无答案

上一个：如果语句检查两个输入，则选中一个复选框，并且输入的值在最大长度 [closed]

下一个：使用纯 javaScript 代码的淡入和淡出动画方法

如何使用 if /else 或 swtich/case 条件动态添加 HTML

How I can dynamically add HTML with if /else or swtich/case conditions

评论