更新输入字段时更改HTML5数据属性

时间:2014-04-23 04:47:36

标签: javascript html5

我正在尝试使用一些javascript来在输入字段中输入文本时更新与div关联的数据属性(data-foo)。有任何想法吗?我完全难过了。

<div data-foo=""></div>
<textarea name="extraoptions">bar</textarea>

3 个答案:

答案 0 :(得分:1)

使用jQuery,您可以执行以下操作:

jQuery("body").find("div[data-foo]").html('My New HTML Content For DIV with data-foo attribute');

那么,为什么要使用:

jQuery("body")

反对:

$("body")
你可能会问?好吧,这确保我们不会与网站上可能正在使用的任何其他库发生任何冲突,认为这是编写jQuery的安全方式。

答案 1 :(得分:0)

如果您可以按ID或按类获得此div,请说

<div id="div1" data-foo=""></div>

然后你可以这样做 -

$("#div1").attr("data-foo", val)

答案 2 :(得分:0)

我只是在我的FIDDLE中为你编码。使用此JSFIDDLE。它会正常工作。我希望这是你现在想要的那个。

<强> HTML5

<input id="text" type="text"/>
<br/><br/>
<div id="result" data-foo="">This is the div with `data-foo` attribute. While you typing this div `data-foo` attribute will change as input valu. If you want to check it. Just click on below button.</div>
<br/>
<button id="test">What is my DIV `data-foo` now?</button>

<强>的jQuery

//FOR TESTING - This function will help you to test the below function is working or not
$("#test").click(function(){
    var value = $('#result').attr('data-foo');
    alert(value);
});

//This function will auto change `data-foo` while you typing 
$("#text").keyup(function(){
   var text = $(this).val();
   $("#result").attr('data-foo',text);
});

DOM准备好后使用它。

如果你需要我的帮助。请通过搜索yeshansachithak找到我的社交网络。