我想写一个简单的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.
如何将javascript Array存储在HTML5 data属性中？
我尝试了JSON.stringify阳离子和逃避角色的每一种变化.
存储数组并再次检索它的精确方法是什么？
注意
我用它构建数组[ $("#firstSelectedElement").val(), $("#secondSelectedElement").val() ].我检索id="storageElement" data-storeIt="stuff"用$("#storageElement").data('storeit').
我似乎永远不会将数据检索为真实的Array,只有一个Array字符.
根据数据集规范,element.dataset如何删除数据属性？考虑:
<p id="example" data-a="string a" data-b="string b"></p>
如果你这样做:
var elem = document.querySelector('#example');
elem.dataset.a = null;
elem.dataset.b = undefined;
elem.dataset.c = false;
elem.dataset.d = 3;
elem.dataset.e = [1, 2, 3];
elem.dataset.f = {prop: 'value'};
elem.dataset.g = JSON.stringify({prop: 'value'});
DOM在Chrome和Firefox中变成了这个:
<p id="example"
data-a="null"
data-b="undefined"
data-c="false"
data-d="3"
data-e="1,2,3"
data.f="[object Object]"
data.g="{"prop":"value"}"
></p>
Chrome/Firefox实施模仿setAttribute.它基本上适用于.toString()第一.除了处理之外,这对我来说是有道理的,null因为我希望这null会删除属性.否则,数据集API如何执行以下操作:
elem.removeAttribute('data-a');
那么布尔属性呢:
<p data-something>相当于<p data-something="">嗯.
我可以有
%a{href: '#', data_toggle_description_length: 'toggle_me_ajax'}
它给了我强调的不是破折号,即
<a href="#" data_toggle_description_length="toggle_me_ajax"></a>
但是我想拥有HTML5 data-属性,即
<a href="#" data-toggle-description-length="toggle_me_ajax"></a>
但是当我尝试用破折号替换下划线时,即
%a{href: '#', data-toggle-description-length: 'toggle_me_ajax'}
我得到语法错误:
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected tLABEL
...data-toggle-description-length: 'toggle_me_ajax')}>\n tog...
... ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected ')', expecting '}'
...ption-length: 'toggle_me_ajax')}>\n toggleMeAjax\n </a>\...
... ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unknown regexp options - pa
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $undefined
... toggleMeAjax\n </a>\n</span>\n", -1, false);::Haml::Util.h...
... ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unterminated string meets end of file
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $end, expecting '}'
haml ruby-on-rails custom-data-attribute ruby-on-rails-3 html5-data
点击其中一个选项,我试图从'ul li a'获取数据值并将其放入下面的按钮,我在这里设置了一个小提琴示例:http://jsfiddle.net/q5j8z/4 /
但似乎无法让它发挥作用
$('ul li a').click(function(e) {
e.preventDefault();
var value = $(this).data();
$('.button').data('value');
});
有没有人有任何想法吗？
问题:
创建数据表后,每列中的每个单元都应该有一个单击事件,该事件将打开一个弹出窗口并传入一个从端点接收的JSON名称列表.端点根据单击的表格单元格而变化.
我认为,在数据表实例化时,我需要在每个表格单元格元素上定义的HTML5数据属性中存储某种独特的信息.我希望声明一个自定义数据属性(例如:data-endpoint ="endpoint id"),但如果表行是通过DataTables动态生成的话,我可能不会这样做.
因为我不知道/不了解我的选择,所以我想描述一下我理想的做法:
我不明白的部分是如何在表格单元格元素上创建自定义数据属性.这是可能的还是我需要考虑另一种方法.任何帮助深表感谢!
我有以下带有数据属性的HTML - 我想编写一些jQuery,它将循环遍历HTML并收集数据属性并将它们放入数组中 - 任何人都可以帮助我,因为我收到错误.
ERROR in console log : item.data is not a function
我正在尝试使用data()属性 - 你能看到我做错了吗？
//我的HTML代码
<span class="winners" data-userid="123" data-position="1" data-fullname="neil">
<span class="winners" data-userid="234" data-position="2" data-fullname="Ron">
<span class="winners" data-userid="421" data-position="3" data-fullname="Philip">
//我的jQuery代码
var multi = $('.winners');
var winners_array = [];
$.each(multi, function (index, item) {
winners_array.push( {name: 'fullname', value: item.data('fullname')} );
});
console.log(winners_array);
// ERROR in console log : item.data is not a function
我有一个包含此代码的rails表单:
<%= form_tag("../vehicles", method: "get") do %>
<div>
<div>
<%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>
</div>
<div>
<%= label_tag(:address, t("ui.reservations.between_now_and_param", param: @start_date.strftime( time_format))) %>
</div>
<div>
我想在第一个标签上添加HTML数据属性,所以我尝试了:
<%= label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') %>
但是我收到语法错误:
预订#new中的SyntaxError
.../_form.html.erb:8: syntax error, unexpected tLABEL
');@output_buffer.append= ( label_tag(:address, t("ui.reservations.pickup"), data-addr: 'here') );@output_buffer.safe_concat('...
我可以添加它
<%= label_tag(:address, t("ui.reservations.pickup"), data: 'here') %>
这会产生:
<label for="address" data="here">
但我似乎无法添加data-something属性.我得到语法错误.
我怎样才能做到这一点？
我有16个不同的section标签.每个section-tag都有一个data-属性来为每个标签设置特定的背景颜色section:
<section data-color="#A3D1B5">
现在我想将此颜色设置为背景.
我已经尝试过的
在这个问题中使用HTML5数据属性的CSS值说答案,应该可以设置颜色,background: attr(data-color);但这对我不起作用...
我看了看jQuery data()但我不知道如何为所有section-tags 设置背景.
任何其他解决方案或提示如何处理这个jQuery data()？
html文件:
<div class="test" data-word="AAA" data-type="T" data-number="1"> Text 1 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 2 </div>
<div class="test" data-word="AAA" data-type="CCC" data-number="2"> Text 3 </div>
<div class="test" data-word="D" data-type="BBB" data-number="6"> Text 4 </div>
<div class="test" data-word="AAA" data-type="BBB" data-number="2"> Text 6 </div>
<div class="test" data-word="G" data-type="R" data-number="5"> Text 7 </div>
<div class="test" data-word="H" data-type="BBB" data-number="1"> Text 5 </div>
<div class="test" data-word="AAA" data-type="R" data-number="9"> Text 8 </div>
我需要隐藏和显示基于属性的元素.假设我需要显示带有单词AAA和类型BBB和数字2的元素.必须显示具有这些属性的所有元素,并且应使用hide和show方法隐藏其他元素.救命？
当我jQuery.data用来更改值时,DOM中的属性不会更改.但我喜欢当DOM中的属性发生变化时,它更容易调试.
那么可以$().attr("data-value")用来改变数据属性吗？
只是一点点小提示,表明混合$().attr并$().data不能很好地协同工作: