Question

我正在尝试：

使用JQuery“遍历”属于同一CSS类的页面上的所有元素（“样板”）
根据服务器端分配的值（属性：StaticPrefill）
如果两个值不匹配，则应用一个特殊的css类（“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”。我尝试了不同的语法，试图在'＆lt;％='和'％＆gt;'之间加一个变量标签，但我尝试这个时页面将无法编译。

这可能不使用某种背后的代码吗？有什么建议吗？

Answer 1

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

 $(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对象，并根据索引与该模型进行比较。

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

1 个答案: