Javascript：使用变量访问服务器端变量客户端

Question

我正在尝试：

1. 使用 JQuery “循环”页面上属于同一 CSS 类（“样板”）的所有元素
2. 根据其服务器端分配的值检查每个元素的当前值（属性：StaticPrefill）
3. 应用特殊的 css class ("editedbackcolor") 如果两个值不匹配（即我试图在有人编辑文本框上的预填充文本时进行标记）

我正在使用的CSS：

.boilerplate =分配给所有文本框我试图检查表单

.editedbackcolor = 不同的阴影我想分配给当前值不等于服务器端 StaticPrefill 值的文本框。

我到目前为止的 jQuery 代码是：

jQuery(document).ready(function () {

        // select each element with class boilerplate and run a function against it
        jQuery('.boilerplate input').each(function () {              
            var target1 = jQuery(this).attr("id");
            matchcheck(target1);
        });
    });

我正在研究“matchcheck) 函数，这是我遇到问题的地方。我正在尝试拉回服务器端“StaticPrefill”属性值，我可以将其用作比较，我已经通过硬编码控件名称成功查询了此值，例如：

function matchcheck(){         
                var TSP1 = '<%= TextBox1.StaticPrefill %>';
                // If current textbox value does NOT equal it's static prefill value
                if (document.getElementById("Textbox1_textbox1").value != TSP1) {
                alert("TB1 has differnt value than static prefill");
                // change background color to flag it
                jQuery("#Textbox1_textbox1").addClass("EditedBackColor");                   
                }
            }

效果很好，但我不想使用变量来循环。所有元素而不是硬编码函数第一行中的“TextBox1”我尝试了不同的语法，试图在 '<%= ' 和 '%>' 之间放置一个变量。标签，但当我尝试此操作时，页面无法编译。

是否可以使用某种隐藏代码？

Answer 1

如果我理解你的问题，一个更简单的方法是绑定到 jQuery 中的 change 事件。

 $(document).ready(function() {
   jQuery('.boilerplate input').change(function() {
       if(jQuery(this).val() !== jQuery(this).attr("prefill")) {
        jQuery(this)removeClass('boilerplate').addClass("EditedBackColor");
       }
    });
});

您还需要向输入元素添加一个名为“prefill”的属性。您可以在服务器端或客户端执行此操作。它应该看起来像这样：

<input class="boilerplate" id="input1" type="text" prefill="123" value="123"/>

这里需要注意的是，如果他们将其更改回原始值，它仍然会显示为已更改。我不确定这是否适合您的情况。他们确实改变了它本身。如果原始值不存在，则必须将其保存为属性。另一种选择是发送一个模型，可能是一个 json 对象，并根据索引与该模型进行比较。