文章/答案/技术大牛

发布

社区首页 >问答首页 >UI &根据“`selected`”选项隐藏“hide”元素？

问UI &根据“`selected`”选项隐藏“hide”元素？
EN

Code Review用户

提问于 2020-09-21 18:33:20

回答 1查看 39关注 0票数 1

我有以下HTML + JavaScript代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container mt-4">

  

<!-- action="/reports_send/21-TEMP-01a" method="POST" -->
    <h3>Form:</h3>
    <form id="form" class="mt-4 mb-4" >

        <div style="border: 1px solid black; padding: 40px; border-radius: 25px;">
            <div class="container mt-4">
                <div id="errors" class="mt-4"></div>
            </div>

            <h4>Select Room</h4>
            <div id="RoomSelect">
                <select id="RoomMenu" class="form-control mb-4"> 
                    <!-- Drying Room 1 -->
                    <option value="dry-1">Drying Room 1</option>
                    <!-- Drying Room 2 -->
                    <option value="dry-2">Drying Room 2</option>
                    <!-- Dry Store-->
                    <option value="dry-3">Dry Store</option>
                </select>
            </div>
            
            <div id="RoomInputs">

                <!-- Drying Room 1 -->
                <div class="form-group" id="dry-1">
                    <!-- Title -->
                    <h4>Drying Room 1</h4>

                    <!-- All temperatures -->
                    <div class="temperatures">
                        <!-- Actual Temperature -->
                        <label>Temperature °C - <strong>Actual</strong></label>
                        <input type="number" class="form-control" name="actual-temp-1">

                        <!-- Minimum Temperature -->
                        <label>Temperature °C - <strong>Minimum</strong></label>
                        <input type="number" class="form-control" name="min-temp-1">

                        <!-- Maximum Temperature -->
                        <label>Temperature °C - <strong>Maximum</strong></label>
                        <input type="number" class="form-control" name="max-temp-1">
                    </div>
                    <br>
                    <br>
                    <!-- All humidity -->
                    <div class="humidity">
                         <!-- Actual Humidity -->
                        <label>Relative Humidity - <strong>Actual</strong></label>
                        <input type="number" class="form-control" name="actual-temp-2">
                         <!-- Minimum Humidity -->
                        <label>Relative Humidity - <strong>Minimum</strong></label>
                        <input type="number" class="form-control" name="min-temp-2">
                         <!-- Maximum Humidity -->
                        <label>Relative Humidity - <strong>Maximum</strong></label>
                        <input type="number" class="form-control" name="max-temp-2">
                    </div>
                </div>


                <!-- Drying Room 2 -->
                <div class="form-group" id="dry-2">
                    <!-- Title -->
                    <h4>Drying Room 2</h4>

                    <!-- All temperatures -->
                    <div class="temperatures">
                        <!-- Actual Temperature -->
                        <label>Temperature °C - <strong>Actual</strong></label>
                        <input type="number" class="form-control" name="actual-temp-3">

                        <!-- Minimum Temperature -->
                        <label>Temperature °C - <strong>Minimum</strong></label>
                        <input type="number" class="form-control" name="min-temp-3">

                        <!-- Maximum Temperature -->
                        <label>Temperature °C - <strong>Maximum</strong></label>
                        <input type="number" class="form-control" name="max-temp-3">
                    </div>
                    <br>
                    <br>
                    <!-- All humidity -->
                    <div class="humidity">
                         <!-- Actual Humidity -->
                        <label>Relative Humidity - <strong>Actual</strong></label>
                        <input type="number" class="form-control">
                         <!-- Minimum Humidity -->
                        <label>Relative Humidity - <strong>Minimum</strong></label>
                        <input type="number" class="form-control">
                         <!-- Maximum Humidity -->
                        <label>Relative Humidity - <strong>Maximum</strong></label>
                        <input type="number" class="form-control">
                    </div>
                </div>

                <!-- Dry Store -->
                <div class="form-group" id="dry-3">
                    <!-- Title -->
                    <h4>Dry Store</h4>

                    <!-- All temperatures -->
                    <div class="temperatures">
                        <!-- Actual Temperature -->
                        <label>Temperature °C - <strong>Actual</strong></label>
                        <input type="number" class="form-control">

                        <!-- Minimum Temperature -->
                        <label>Temperature °C - <strong>Minimum</strong></label>
                        <input type="number" class="form-control">

                        <!-- Maximum Temperature -->
                        <label>Temperature °C - <strong>Maximum</strong></label>
                        <input type="number" class="form-control">
                    </div>
                    <br>
                    <br>
                    <!-- All humidity -->
                    <div class="humidity">
                         <!-- Actual Humidity -->
                        <label>Relative Humidity - <strong>Actual</strong></label>
                        <input type="number" class="form-control">
                         <!-- Minimum Humidity -->
                        <label>Relative Humidity - <strong>Minimum</strong></label>
                        <input type="number" class="form-control">
                         <!-- Maximum Humidity -->
                        <label>Relative Humidity - <strong>Maximum</strong></label>
                        <input type="number" class="form-control">
                    </div>
                </div>

            </div>
            
        </div>
    </form>

</div>
<button id="submit-btn" class="btn btn-primary">Submit</button>

<script>

// UI CONTROLLER
var UIController = (() => {

// Store DOM Strings
var DOMStrings = {
    room_options: '#RoomMenu',
    btn: '#submit-btn'
};



return {

    // Hide all Div Elements

    hideDivElements: () => {
        console.log(document.querySelector(DOMStrings.room_options).value);

        for(const option of document.querySelector(DOMStrings.room_options).options) {
            document.querySelector(`#${option.value}`).style.display = "none";
        }

        if(document.querySelector(DOMStrings.room_options).value === 'dry-1') {
            document.querySelector('#dry-1').style.display = "block";
        } else if (document.querySelector(DOMStrings.room_options).value === 'dry-2') {
            document.querySelector('#dry-2').style.display = "block";
        } else if (document.querySelector(DOMStrings.room_options).value === 'dry-3') {
            document.querySelector('#dry-3').style.display = "block";
        }
    },



    // Return DOM Strings
    getDOMStrings: () => {
        return DOMStrings;
    }
}



})();


// GLOBAL APP CONTROLLER
var controller = ((UICtrl) => {

    var setupEvenetListeners = () => {

        // Get dom strings from UI Controller
        var DOM = UICtrl.getDOMStrings();

        // On change
        document.querySelector(DOM.room_options).addEventListener('change', () => {
            UICtrl.hideDivElements();
        });

        

    }

    return {
        init: () => {
            console.log("Application has started");
            UICtrl.hideDivElements(); // Hide elements at start of program
            setupEvenetListeners();


        }
    }

})(UIController);

controller.init();

</script>

问题

在我的if语句中，我显示了基于所选选项的特定元素。我想知道，是否有一种方法可以避免在我的dry-1 dry-2 dry-3语句中对if进行硬编码，并且有一种替代的方法？

另外-我不介意听到关于我当前代码的一些评论:)我已经决定开始习惯使用控制器等等。

javascript

html

回答 1

Code Review用户

回答已采纳

发布于 2020-09-21 19:35:35

选项，而不是重复选择room_options值，将其放入变量中，然后引用该变量：

const { value } = document.querySelector(DOMStrings.room_options);
// reference value here
// instead of referencing document.querySelector(DOMStrings.room_options).value

但是，由于选项值与要显示的ID完全匹配，只需将选项值传递到单个querySelector中，就不需要循环：

const { value } = document.querySelector(DOMStrings.room_options);
document.querySelector(`#${value}`).style.display = "block";

你的评论

<!-- All humidity -->
<div class="humidity">
  <!-- Actual Humidity -->
  <label>Relative Humidity - <strong>Actual</strong></label>
  <input type="number" class="form-control">
  <!-- Minimum Humidity -->
  <label>Relative Humidity - <strong>Minimum</strong></label>
  <input type="number" class="form-control">
  <!-- Maximum Humidity -->
  <label>Relative Humidity - <strong>Maximum</strong></label>
  <input type="number" class="form-control">
</div>

通过查看下一行，这些评论不会告诉读者他们已经不知道的任何事情。最好把评论完全排除在外。使用注释来解释为什么要做某件事，或者如果变量或部分还不是很明显的话，它的用途是什么。

变量名

hideDivElements隐藏元素，但它也显示了一个活动元素。也许叫它showActiveElement？
setupEvenetListeners拼错了
var DOM = UICtrl.getDOMStrings(); -但是返回值是一个普通的对象，而不是/ DOM。为了保持一致性，可以在任何地方都叫它相同的名字，DOMStrings。
属性room_options保存选择器字符串#RoomMenu，该字符串指向单个<select>标记，而不是选项的集合。或者打电话给属性roomSelectId？(在大多数情况下，在JS中遵循通常的约定并使用camelCase可能很好)

DOMStrings和封装--我对DOMStrings对象的当前形式有点怀疑--一个只包含可用于选择元素的字符串的对象对我没有什么好处。您可以考虑选择元素本身，并导出它而不是选择器字符串：

const elements = {
  roomSelect: document.querySelector('#RoomMenu'),
  // below: be precise, `submitBtn` is easier to understand than just `btn`
  submitBtn: document.querySelector('#submit-btn'),
};

尽管如此，在前端尝试像这样的封装和抽象还是有点奇怪的，因为所有元素基本上都是全局的。HTML与您的JS (通常也是CSS )有着内在的耦合。如果你在一个地方改变了一些东西，你将不得不在任何地方改变它。看起来，您的DOMStrings可能试图稍微减轻这种情况，以便在需要更改某些内容时只更改DOMString，而不是在整个应用程序中搜索和替换。

这将是一个很大的变化，但如果这正是您所关心的事情，对于一个更大的应用程序，您可以考虑尝试使用一个框架，比如React，这样可以更好地封装组件和实现组件的功能组合。例如，这个应用程序可以用如下所示的方式呈现：

<Rooms roomNames={['Drying Room 1', 'Drying Room 2', 'Dry Store']} />

导致包含标签和输入的Room组件，而无需为每个部分复制新的HTML，也不必指定将DOM连接到事件侦听器的神奇字符串。这只是一些需要考虑的事情，一旦你对JS感到满意。

如果要使用ES2015+语法(这是，而且应该使用)，最好在任何地方使用它--用const 只要有可能声明变量(永远不要用var)。(但是，如果您希望代码与IE11等古老的过时浏览器兼容，那么可以使用Babel将其转换为ES5以用于生产)

票数 3

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/249642

复制

相似问题

问UI &根据“`selected`”选项隐藏“hide”元素？
EN

问题

回答 1

Code Review用户

变量名

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UI &根据“`selected`”选项隐藏“hide”元素？EN

问题

回答 1

Code Review用户

变量名

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问UI &根据“`selected`”选项隐藏“hide”元素？
EN