时间戳

首页 > 解决方案 > 使用 JS 更改 2 个 DIVS

javascript - 使用 JS 更改 2 个 DIVS

问题描述

我对编写 JS 还是很陌生。我希望能够根据标签中的选项更改 2 个 div。

即，如果有人选择红色，它将显示 2 个不同的 div，其中包含关于红色的内容。

请看下面的代码。

先感谢您！

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
   <option value="green">Green</option>
</Select>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(function() {
    $('#colorselector').change(function(){
        $('.colors').hide();
        $('#' + $(this).val()).show();
        
         
    });
});


</script>

标签： javascripthtmljquery

解决方案

现代前端严重依赖模板和渲染。要进入 React/Vue/Angular，请从任何简单的模板库开始。例如车把：

您在车把中的解决方案：

<Select id="colorselector">
            <option value="red">Red</option>
            <option value="yellow">Yellow</option>
            <option value="blue">Blue</option>
            <option value="green">Green</option>
        </Select>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("<div> 'This can be anything eg <b>bold</b> text or selected value: {{content}}</div>");


$(function() {
    $('#colorselector').change(function(){
        $('body').append(template({ content: $(this).val() }))
         
    });

    
});


</script>

推荐阅读