时间戳

首页 > 解决方案 > 在第一次为 let 变量赋值后，它的值没有改变#JavaScript

javascript - 在第一次为 let 变量赋值后，它的值没有改变#JavaScript

问题描述

在单击弹出窗口打开后，我已经创建了单击事件。在那个弹出窗口中，他们是一个声明，其中我动态更改了enable和disable关键字，因此，当我第一次运行服务器时，该值被分配给let变量，但在单击同一个按钮后，变量的值是不会在弹出框中得到更改。

HTML

<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title">%MODALNAME%</h5>*@
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to %STATUS% the rule with Options ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

JavaScript

const changeStatusText = function (value) {
            let statusText = $('#action-confirm-box').find('div.modal-body').html();
            if (value) {
                console.log("Inside IF");
                statusText = statusText.replace('%STATUS%', 'disable');
            }
            else {
                console.log("Inside else");
                statusText = statusText.replace('%STATUS%', 'enable');
            }
            $('#action-confirm-box').find('div.modal-body').html(statusText);
        };

因此，在此代码运行时，我们单击按钮，第一次打开弹出窗口并分配%STATUS%值，但在第二次单击时，If 和 else 语句的%STATUS%值保持不变。我没有明白这里有什么问题

const operateEvents = {
            'click .btn-icon': function (e, value, row, index) {
                console.log("operateEvents  ", row);
                changeStatusText(row.enabled);
                    $('#action-confirm-box').modal('show');
                    
                $('#continue-confirm-box').click(() => changeStatus(row, index));
                
            }
        };

标签： javascripthtmlrazor-pagesasp.net-core-5.0

解决方案

在html中添加一个元素来更新内容

<div class="modal" id="action-confirm-box" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                @*<h5 class="modal-title">%MODALNAME%</h5>*@
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Do you want to <span class="status_text">%STATUS%</span> the rule with Options ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" id="continue-confirm-box" class="btn btn-primary">Continue</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

然后通过 javascript 更新该元素的内容

const changeStatusText = function (value) {
            //Use the ternary operator to toggle the text
            $('#action-confirm-box .status_text').html(value ? "disable" : "enable");
}

推荐阅读