$('div').data('info', 1);
alert($('div').data('info'));
//this works
$('div[data-info="1"]').text('222');
//but this don't work
我在jquery中创建元素.之后,我想添加属性"数据".他喜欢并且被添加了,但是在DOM中,这并不明显,我无法使用该项目
$('div[data-example="example"]').html()
我在MVC视图上有以下字段:
@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>
在单独的js文件中,我想将data-helptext属性设置为字符串值.这是我的代码:
alert($(targetField).data("helptext"));
$(targetField).data("helptext", "Testing 123");
该alert()呼叫工作正常,它显示在警报对话框文本"古文字".但是,将data-helptext属性设置为"测试123" 的调用不起作用."旧文本"仍然是属性的当前值.
我是否错误地使用了对data()的调用？我在网上看了这个,我看不出我做错了什么.
这是HTML标记:
<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />
model-view-controller jquery attributes custom-data-attribute
我想写一个简单的jQuery插件,在指定的元素下显示内联模式.我的想法是让脚本根据元素上指定的数据属性进行自动初始化.
一个非常基本的例子:
<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>
我只是想知道data-modal-target在上面的例子中是否有效,或者它是否必须data-modal-target="true"？我不关心比IE9等更糟糕的东西,我唯一的要求是它是有效的HTML5.
我有下一个HTML:
<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>
是否有可能获得开头的属性data-,并在JavaScript代码中使用它,如下面的代码？现在我得到null了结果.
document.getElementById("the-span").addEventListener("click", function(){
var json = JSON.stringify({
id: parseInt(this.typeId),
subject: this.datatype,
points: parseInt(this.points),
user: "H. Pauwelyn"
});
});
我正在尝试选择具有data-go-to非空属性的所有元素.
我试过$('[data-go-to!=""]')但奇怪的是,如果我这样做的话,它似乎正在选择页面上的每一个元素.
无论如何在ViewModel上预先填充了具有数据属性的SelectList吗？
我想要做
@Html.DropdownListFor(m=> m.CityId, Model.Cities);
所以它生成如下代码:
<select id="City" class="location_city_input" name="City">
<option data-geo-lat="-32.522779" data-geo-lng="-55.765835" data-geo-zoom="6" />
<option data-geo-lat="-34.883611" data-geo-lng="-56.181944" data-geo-zoom="13" data-geo-name="Montevideo" data-child=".state1" value="1">Montevideo</option>
<option data-geo-lat="-34.816667" data-geo-lng="-55.95" data-geo-zoom="13" data-geo-name="Canelones, Ciudad de la Costa" data-child=".state41" value="41">Ciudad de la Costa</option>
</select>
asp.net-mvc html5 html-helper selectlist custom-data-attribute
在我的HTML中,我有一个span元素:
<span class="field" data-fullText="This is a span element">This is a</span>
我想获得data-fullText属性.我尝试了这两种方式,但它们没有用(两者都返回undefined):
$('.field').hover(function () {
console.log('using prop(): ' + $(this).prop('data-fullText'));
console.log('using data(): ' + $(this).data('fullText'));
});
然后我搜索并发现了以下问题:如何获取data-id属性？和jquery无法获取数据属性值.
这两个人的答案都是"Use .attr('data-sth') or .data('sth')".
我知道这.attr()已被弃用(在我使用的jquery-1.11.0中),但是,我试过了.
它工作了!
有人可以解释原因吗？
我计划为朋友建立一个自定义照片库,我确切知道我将如何制作HTML,但是我遇到了一个CSS的小问题.
(如果可能的话,我宁愿没有页面样式依赖于jQuery)
Data-Attribute中使用HTMLBackground-image<div class="thumb" data-image-src="images/img.jpg"></div>我认为CSS应该是这样的:
.thumb {
width:150px;
height:150px;
background-position:center center;
overflow:hidden;
border:1px solid black;
background-image: attr(data-image-src);/*This is the question piece*/
}
data-image-src从div.thumb我的HTML文件,并使用它的每一个div.thumb(或多个)background-image在我的CSS文件来源.
这是一个Codepen Pen,以获得我正在寻找的动态示例:http:
//codepen.io/thestevekelzer/pen/rEDJv
我在DOM中有一个元素:
<a href="#" data-a="1">Link</a>
我想通过其HTML5自定义数据属性获取此元素data-a.所以我写JS代码:
var a = document.querySelector('a[data-a=1]');
但是这段代码不起作用,我在浏览器的控制台中出错了.(我测试了Chrome和Firefox.)
JS代码var a = document.querySelector('a[data-a=a]');不会导致错误.所以我认为问题是HTML5的JS API document.querySelector不支持在HTML5自定义数据属性中查找数值.
这是浏览器实现错误或HTML5规范相关问题document.querySelector吗？
然后我在http://validator.w3.org/上测试了以下代码:
<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML Document</title>
<a href="#" data-a="1">Link</a>
他们已经过验证.由于这些HTML5代码已经过验证.我们应该使用HTML5的JS API document.querySelector通过其自定义数据属性来查找此锚元素.但事实是我得到了错误.
HTML5对HTML5 JS API的规范是否document.querySelector说该方法无法查找具有数值的HTML5数据自定义属性？(需要HTML5规范源.)
javascript html5 css-selectors selectors-api custom-data-attribute
最近我编码了,我遇到了一个奇怪的问题.我试图将数据属性分配给我创建的新元素(通过jQuery),但却发现它实际上不会分配属性.有关示例,请参阅以下链接,代码如下:
http://jsfiddle.net/y95p100c/1/
知道为什么会这样吗？我从来没有偶然发现这个......
var div = $("<div />")
$(div).data("foo", "bar")
console.log($(div)[0].outerHTML) // prints <div></div>
jquery ×5
html5 ×4
javascript ×4
html ×2
asp.net-mvc ×1
attributes ×1
css3 ×1
html-helper ×1
html5-data ×1
selectlist ×1