在 Javascript 中分配变量答案

【问题标题】：Assigning a variable in Javascript在 Javascript 中分配变量
【发布时间】：2017-03-17 06:44:35
【问题描述】：

我已将索引定义为<%var index = 0;%>，它位于 HTML 正文的顶部，因此我可以将其用作全局变量。我想将$(this).val() 的值分配给<% index %>。我已经尝试了多次，但无法弄清楚。我在后端使用 Node.js，在前端使用 EJS。

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                <% index %> = parseInt($(this).val()); ????
            }
            $modal.modal('show');
        }
    });
</script>

【问题讨论】：

您似乎正在尝试以一种不太可行的方式混合服务器端渲染和客户端渲染。由于脚本标签是在页面加载后执行的，因此无法正确解析呈现的 EJS。相反，请考虑围绕您需要更改的内容添加一个包装器元素，并更新该客户端，而不是混合服务器端和客户端变量，因为它们将无法同步更新。
您的索引变量是服务器变量，而您的脚本在客户端上运行。您不能在客户端环境中将某些内容分配给服务器变量。查看 Ajax 以将数据传送到服务器。
使用window.index=parseInt($(this).val());全局访问
ejs 不是前端，这就是你的思维方式崩溃的地方。这很混乱，因为它在你面前混合在一起，但是ejs在js之前渲染得很好
@ajaiJothi 这可能不会完全符合预期。据我所知，提问者希望更新一个变量，该变量将与页面上方的另一个变量同步。另外，我对touching globals/window 总是很不确定。

标签： javascript jquery html node.js

【解决方案1】：

正如有人提到的，您需要区分在服务器上计算的内容和在浏览器上完成的内容：

一个常见的页面可能如下所示：

<script>
    var index = <% index_calculated_on_server %>;
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                index = parseInt($(this).val()); ????
            }
            $modal.modal('show');
        }
    });
</script>

【讨论】：

【解决方案2】：

您的问题在于混合了服务器端和客户端渲染。为了说明，让我们看一下您提供的 sn-p。

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                <% index %> = parseInt($(this).val()); // This is the problem line
            }
            $modal.modal('show');
        }
    });
</script>

EJS 甚至在发送到客户端之前就被渲染，合并提供给它的变量，所以如果你将 index 设置为零，那么在渲染完成后你最终会得到一个像这样的 sn-p。

<script>
    $("#agency").on("change", function () {
        var $modal = $('#myModal');
            if($(this).val() !== '0'){
                0 = parseInt($(this).val()); // Can't assign zero. 
            }
            $modal.modal('show');
        }
    });
</script>

相反，您应该将您对<% index %> 的使用包装在一个包装器元素中，这应该允许您在客户端对其进行操作。

$("#agency").on("change", function () {
    var $modal = $('#myModal');
    if( $(this).val() !== '0' ) {
        $(".index-counter").text(parseInt($(this).val()));
    }
    $modal.modal = function () { /* stub function */ };
    $modal.modal('show');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="agency" id="agency" />

<!-- This would be where <% index %> was inserted -->
<div class="index-counter">0</div>

【讨论】：