0

I am using a textBox with the data-mini attribute set to true and a button to manipulate the input text box's attribute.

<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>

Now What i want to change the data-mini to false on above button click. For this I have declared the method

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

But data-mini attribute is not set to false although the value attribute is updated on button click. Can't find any solution for this !! Thanks..

4

3 回答 3

1

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

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

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

于 2013-11-14T10:34:16.610 回答
1

您需要使用以下data()功能：

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

这是因为 jQuerydata-*出于性能原因将属性保存在内部缓存中。单独更改属性不会更新它。如果您在任何 DOM 检查器中检查页面，HTML 不会改变，但 jQuery 的行为会改变。

于 2013-11-14T10:26:45.957 回答
0

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

<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 请检查任何 js 或 css 文件是否没有覆盖它..

data-mini 的值也由前面的代码更新，但它没有反映在 phonegap + android 的文本框布局中。可能是某些或其他 css 或 js 会覆盖它！感谢@rajesh kakawat 对此进行探索。:)

于 2013-11-15T07:23:06.173 回答