Question

我们有一个硬件平台，我们可以通过不同的项目进行调整。固件提供了常见的功能，并且还添加了一些特定的每个项目。我们有一个包含所有功能的庞大文档（Word文件），并希望使其成为动态的，以便根据所选项目隐藏/显示项目特定项目。

例如，我们可能有：

特定于项目A的特征1
特定于项目B的特征2
A和B共享的功能3
所有项目共享的功能

我们想要一个带有组合框（或其他内容）的规范文件，您可以在其中选择All，project A，project B或project C显示：

如果我们选择All：功能1,2,3和4
如果我们选择A：功能1,3和4
如果我们选择B：功能2,3和4
如果我们选择C：功能4

我认为html可能是一个很好的方法（html文件会替换docx文件），但我们希望文件在本地机器上工作（没有php或脚本需要托管在网络服务器）。

我发现this post在本地有效，但我看不到如何调整它以处理A和B共享的Feature 3，也不知道如何在选择All时显示所有内容。 ..（实际上，我怀疑这种方法符合我的需求，因为它按id过滤内容，我打赌一个项目只能有一个id。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="view_all">Show all</option>
            <option value="project_a">Project A</option>
            <option value="project_b">Project B</option>
            <option value="project_c">Project C</option>
        <select>

        <div id="project_a" class="inv">Feature 1</div>
        <div id="project_b" class="inv">Feature 2</div>
        <!-- how to handle Feature 3 shared by A and B? -->
        <div>Feature 4</div>

        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    <!-- how to have everyone visible when All is selected? -->
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
    </body>
</html>

任何想法如何通过这种方法或其他方法（基于HTML或其他方式）实现这一目标......？

基于用户选择的动态条件html内容

0 个答案: