Question

我正在使用一个textBox，其data-mini属性设置为true，另一个按钮用于操作输入文本框的属性。

<input type="text" name="text1"  Value="Enter name" id="txt1" data-mini="true" ></text>

<input type="button" value="Update Attribute"  id="but1" onClick="$(this).UpAttr();"> </button>

现在我想在上面的按钮点击上将数据迷你更改为错误。为此，我宣布了方法

$.fn.UpAttr=function()
    {
        $("#txt1").attr("data-mini","false");
        $("#txt1").attr("value","New Value");
         alert("The Button was clicked.");;
    }

但是，尽管在按钮点击时更新了value属性，但data-mini属性未设置为false。找不到任何解决方案!! 感谢..

Answer 1

您需要使用data()功能：

$.fn.UpAttr = function() {
    $("#txt1")
        .data('mini', false)
        .prop('value', 'New Value');
    alert('The Button was clicked.');
}

这是因为出于性能原因，jQuery将data-*属性保留在内部缓存中。仅更改属性不会更新该属性。如果您在任何DOM检查器中检查页面，HTML将不会更改，但jQuery的行为将会发生。

Answer 2

如果你想改变而不是试试这个FIDDLE

document.getElementById('txt1').setAttribute('data-mini',false);

数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（然后所有数据值都内部存储在jQuery中）

Answer 3

最后，我通过修改style属性更新了文本框的宽度。我用以下方法解决了它：

<input type="text"  name="text1" id="txt1"  Value="Enter name" style="width:20%;" ></input>
<br><br>
<input type="button" value="Update Attribute"  id="but1" onClick="$(this).UpAttr();"> </input>

并将方法更新为：

 $.fn.UpAttr=function()
    {

    $("#txt1").attr('style','width:80%;');
         alert("The Button was clicked.");
    }

Nd Plz检查是否有任何js或css文件没有覆盖它..

data-mini的值也由前面的代码更新，但它没有反映在phonegap + android的文本框布局中。可能是某些或其他css或js将覆盖它！ Thanx到@rajesh kakawat探索这个。：）

无法更改data-mini属性

3 个答案: