custom-data-attribute 相关问题

自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据，因为没有更合适的属性或元素。

如何在 Astro 中创建“动态”数据属性（具有唯一 id 的 HTML 元素）并将变量从服务器传递到客户端

在我的 Astro 应用程序中，我需要将一个变量从服务器（frontmatter）传递到客户端。就像文档描述的那样，有两个选项。使用数据属性使用定义变量据我所知...

javascript server-side-rendering custom-data-attribute astrojs server-variables

回答 1 投票 0

假设您有以下 HTML5 AA BB 假设您有以下 HTML5 <select id="example"> <option value="AA" data-id="143">AA</option> <option value="BB" data-id="344">BB</option> </select> $("#example").select2(); 如何从所选选项中获取数据ID？ select2 没有直接的方法，您可以使用 select2 数据和 jQuery 的组合，如下所示： $("#example").select2().find(":selected").data("id"); 首先获得 select2 数据，然后使用 jQuery 找到所选选项，最后找到数据属性。 Select2 v4 依赖于 <select> 标签而不是隐藏的 <input> 标签，因此现在可以更轻松地获取选定的一个或多个选项：您只需引用原始的 <select>。 Select2 v3 也可能出现这种情况，但我只使用过 Select2 v4。 $('#example option:selected').attr('data-id') jsfiddle演示另请参阅使用 JavaScript 在下拉列表中获取所选值？编辑：我喜欢这个答案用于通用数据对象访问： var d = $("#dropdown").select2("data"); d 将是一个包含所选项目作为对象的数组，因此要访问第一个项目的 id 属性： var id = d[0].id; $(document).ready(function() { $('select#myselect').select2({ templateResult: formatOutput }); }); function formatOutput (item) { var $state = $(item.element).data('id') + ' ' + item.text; return $state; }; 如此简单，使用 jquery api [针对 select2 4.x 版本进行测试] $('#select').on('select2:select', function (e) { let id = $(e.params.data.element).data('id'); }); 经过几个小时的尝试解决这个问题，我成功地提取了该属性。我用的是3.5.4 $("#select2").select2('data').element[0].attributes[1].nodeValue HTML <select id="select2" name="course" class="form-control"> <option></option> <optgroup label="Alabama"> <option value="City 1" data-url="/alabama/city-1">City 1</option> <option value="City 2" data-url="/alabama/city-2">City 2</option> </optgroup> </select> $("#select2").select2('data').element[0].attributes[0].nodeValue --> Value Attribute $("#select2").select2('data').element[0].attributes[1].nodeValue --> Data-URl Attribute 我们可以简单地这样做，例如： $(this).find(":selected").data("id") 我对如何使用 Select2 事件获取所选选项的数据属性值的贡献（3.5）（感谢 @loreto g 的回答）： <select id="myselect"> <option value="foo" data-type="bar" data-options='baz'></option> </select> <script> var myselect = $('#myselect').select2(); myselect.on('select2-selecting', function(sel){ var seltype = sel.choice.element[0].attributes['data-type'].value, seloptions = sel.choice.element[0].attributes['data-options'].value; }); </script> 希望这有帮助这是我的处理方法。不确定 opt-groups。 HTML <select id="myselect" name="myselect"> <option value="" data-url=""></option> <option value="City 1" data-url="/alabama/city-1">City 1</option> <option value="City 2" data-url="/alabama/city-2">City 2</option> </select> JAVASCRIPT $("#myselect").select2({ width: '100%', templateSelection: function (data, container) { // Add custom attributes to the <option> tag for the selected option $(data.element).attr('data-url', data.dataset.url); return data.text; } }); var url = $("#myselect").find(':selected').data('url'); 我使用 select2 动态加载所有选项（从数组），这就是我能够成功使用的： $('#element').select2('data')[0].dataAttribute; 其中选择的 id 是“element”，dataAttribute 是我尝试检索的选项的自定义属性。 Ad Per @Kalzem 示例工作得很好但是你必须像这样提及你的属性 data-attributeName 。您必须首先提及 data，然后提及您的 attributes 名字。示例：<option value="AA" data-attributeName="143">AA</option>，您将通过 $("#example").select2().find(":selected").data("attributeName"); 获得数据

html jquery-select2 custom-data-attribute

回答 0 投票 0

HTML 属性 data-sheets-userformat 的用途是什么？

我正在编写一个脚本来将 WordPress 网站迁移到自定义 CMS。在一些帖子内容中，有一些我不明白的 HTML。数据表用户格式属性的目的是什么...

html custom-data-attribute

回答 1 投票 0

我可以使用 HTML5 data-* 属性作为布尔属性吗？ [重复]

我想使用自定义布尔属性将元素的内容标记为可编辑。我知道 data-* 属性，但不确定它们是否需要值。我不需要 data-is_editable="false...

html custom-data-attribute

回答 2 投票 0

更改通过 WooCommerce 生成的数组的格式

我使用以下代码生成 woocommerce 属性数组： $customAttributes = 数组(); $attributes = $product->get_attributes(); foreach($属性为$attr=>$attr_...

php arrays wordpress woocommerce custom-data-attribute

回答 1 投票 0

从“活动”幻灯片上的数据属性获取文本并使用其值更新段落元素

我尝试（但失败了）编写一些 JavaScript，从轮播的“活动”幻灯片中获取数据属性，然后将相同的文本添加到容器外部的 p 元素中。当狂欢的时候...

javascript html jquery custom-data-attribute swiper.js

回答 3 投票 0

为什么我应该在属性中使用“data-”或在标签中使用破折号？

根据许多最近的 HTML 规范，当我们使用自定义属性（意味着规范中未定义的任何属性）时，我们应该在它们前面加上 data- 前缀。然而，我认为没有理由必须这样做......

html custom-data-attribute custom-tag

回答 2 投票 0

我们如何使用具有数据属性的滑动滑块来从属性值访问其功能

我正在尝试借助数据属性创建响应式滑动滑块来访问滑动滑块功能。这是我的 HTML 代码：我正在尝试借助数据属性创建响应式滑动滑块来访问滑动滑块功能。这是我的 HTML 代码： <div class="swiper-container " data-slidespace="30" data-smView="1" data-mdView="2" data-lgView="3" data-xlView="4"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> <div class="swiper-container " data-slidespace="15" data-smView="1" data-mdView="2" data-lgView="2" data-xlView="3"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> 下面是我的JS代码： $(".swiper-container").each(function() { var web_slider = $(this); web_slider.Swiper({ spaceBetween: web_slider.data("slidespace"), breakpoints: { 320: { slidesPerView: web_slider.data("smView"), }, 768: { slidesPerView: web_slider.data("mdView"), }, 1024: { slidesPerView: web_slider.data("lgView"), }, 1190: { slidesPerView: web_slider.data("xlView"), } }, }); }); 我遇到的错误 :: web_slider.Swiper 不是函数在 HTMLDivElement.. 我是 javascript 和 Jquery 的新手。如果我能更正我的代码或指导我找到正确的解决方案，那就太棒了。谢谢你 Jquery 方法正如 Rory McCrossan 所评论的，在初始化 swiper 时，你不能混合使用 jquery 和原生 JS 对象/节点。这是 jquery 脚本的修改版本： $(function () { $(".swiper-container").each(function () { // convert jquery object to native node let web_slider = $(this)[0]; let optionsData = web_slider.dataset; // set options for swiper let options = { spaceBetween: optionsData.slidespace, breakpoints: { 320: { slidesPerView: optionsData.smview }, 768: { slidesPerView: optionsData.mdview } } }; // init new Swiper(web_slider, options); }); }); body { background: #eee; font-family: sans-serif; } .swiper { width: 100%; height: 100%; margin: 1em 0; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script> <div class="swiper swiper-container " data-slidespace="30" data-smView="2" data-mdView="3" data-lgView="4" data-xlView="4"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> <div class="swiper swiper-container " data-slidespace="15" data-smView="1" data-mdView="2" data-lgView="2" data-xlView="3"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </div> 基本上，我们只是将 Jquery 对象转换为本地 JS 等价物，如下所示： let web_slider = $(this)[0]; 然后通过检索数据属性来填充 swiper.js 选项对象 // set options for swiper let options = { spaceBetween: optionsData.slidespace, breakpoints: { 320: { slidesPerView: optionsData.smview }, 768: { slidesPerView: optionsData.mdview } } }; // init new Swiper(web_slider, options); 这种方法有一些缺点：您需要一个额外的抽象来将多个数据属性组装到最终的 swiper.js 兼容选项对象中。当使用的库基于本机java脚本对象时，通过Jquery解析数据属性没有真正的好处。原生 Js 方法由于 swiper.js 不基于/依赖于 Jquery，你应该考虑“vanilla JS”方法。按照 Roman Koff 的建议 – 看看 pavelblednov 的 github 要点。但是，我们可以通过创建更通用和通用的初始化辅助函数来进一步简化/完善这种方法。将所有选项定义为 JSON 字符串您可以将选项对象转换为 JSOn 字符串，而不是添加多个数据属性： let options = { spaceBetween: 5, slidesPerView: 2 } 成为 {"spaceBetween":5, "slidesPerView":2} 显然这个对象或 JSON 字符串必须遵守当前的 API 选项/参数。我们需要小心所附的引号。您可以将数据属性值括在单引号中，并将对象键括在双引号中，如下所示： <div class="swiper" data-swiper='{"spaceBetween":5, "slidesPerView":2}'> 这是许多其他滑块使用的常见做法，例如 splide.js（vanilla js）slick slider（jquery）支持开箱即用的数据属性设置。选项对象到数据属性 JSON 字符串更复杂的选项可能会稍微容易出错（例如缺少引号或大括号）。 JSON.stringify()可以帮助获取正确的JSON字符串： let options = { spaceBetween: 12, slidesPerView: 3, pagination: { el: ".swiper-pagination" }, autoplay: { delay: "1000" }, breakpoints: { // when window width is >= 320px 320: { slidesPerView: 2, spaceBetween: 20 }, // when window width is >= 480px 480: { slidesPerView: 3, spaceBetween: 30 }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40 } } }; console.log(JSON.stringify(options)); JS 示例：使用通用初始化函数 // basic options for all sliders let defaults = { spaceBetween: 5, slidesPerView: 2 } // call init function initSwipers(defaults); function initSwipers(defaults={}, selector='.swiper'){ let swipers = document.querySelectorAll(selector) swipers.forEach(swiper=>{ // get options let optionsData = swiper.dataset.swiper ? JSON.parse(swiper.dataset.swiper) : {}; // combine defaults and custom options let options = { ...defaults, ...optionsData }; // init new Swiper(swiper, options); }) } body { background: #eee; font-family: sans-serif; } .swiper { width: 100%; height: 100%; margin: 1em 0; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; } <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.4.1/swiper-bundle.min.js"></script> <div class="swiper" data-swiper='{"spaceBetween":12,"slidesPerView":3,"pagination":{"el":".swiper-pagination"},"autoplay":{"delay":"1000"},"breakpoints":{"320":{"slidesPerView":2,"spaceBetween":20},"480":{"slidesPerView":3,"spaceBetween":30},"640":{"slidesPerView":4,"spaceBetween":40}}}'> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> </div> <div class="swiper" data-swiper='{"slidesPerView":4}'> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> </div> <h3>No data attribute - use defaults</h3> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <div class="swiper-pagination"></div> </div> 如何运作使用指定选择器循环所有元素 - 默认“.swiper” 检索数据属性并解析它JSON.parse(swiper.dataset.swiper) 我们可能希望指定应用于所有实例的默认选项，并将它们与各个数据选项合并。我们可以通过扩展运算符合并两个对象让选项= { ...默认值， ...选项数据 }; 数据属性中指定的参数将覆盖默认值。测试：请参阅 codepen 示例。最简单的方法是 eval() 函数。可能存在一些安全问题。轻轻使用。 <div class="swiper" data-swiper="{ loop: true, lazy: true, autoHeight: true, autoplay: { delay: 3000, disableOnInteraction: true, }, }"> $('[data-swiper]').each(function() { try { let options = $(this).attr('data-swiper'); eval('options=' + options); if (typeof options == 'object') { new Swiper(this, options); } } catch(err) { console.error('Check swiper options', err); } });

javascript html jquery custom-data-attribute swiper.js

回答 2 投票 0

如何使用 HTML 数据集属性删除 data-* 属性

根据数据集规范，element.dataset是如何删除数据属性的？考虑： <... 根据数据集规范，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'}); Chrome 和 Firefox 中的 DOM 变成这样： <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=""> 嗯。 “删除”不会删除数据集元素吗？例如： <div id="a1" data-foo="bar">test</div> <script> var v = document.getElementById('a1'); alert(v.dataset.foo); delete v.dataset.foo; alert(v.dataset.foo); </script> 一个相当简单直接的方法： const someElement = document.querySelector('...'); Object.keys(someElement.dataset).forEach(dataKey => { delete someElement.dataset[dataKey]; }); 根据 MDN，您需要使用删除运算符来删除数据集元素当您想要删除某个属性时，可以使用删除运算符。 const p = document.getElementById('example') delete p.dataset.a delete p.dataset.b 这是为了删除所有 data-* 属性。您可以在 for 循环中添加条件以仅删除特定的数据属性。希望这有帮助:) var elem = document.querySelector('#example'); var dataset = elem.dataset; for (var key in dataset) { elem.removeAttribute("data-" + key.split(/(?=[A-Z])/).join("-").toLowerCase()); } <div id="DomTest" data-load="true" data-id="5468KmH" data-page="1">test</div> var DomTest = document.getElementById("DomTest"); Object.keys(DomTest.dataset).forEach(key => { delete DomTest.dataset[key]; }) <div data-id="test">test</div> $(document).ready(function(){ $("div").removeAttr("data-id"); // removing the data attributes. console.log($("div").data("id")); // displays in the console. });

javascript dom custom-data-attribute

回答 6 投票 0

如何为我的选择框的每个选项添加数据属性？

在我的 Rails 应用程序中，我有这个选择框： <%= f.select :invoice_id, current_user.invoices.numbers_ordered %> 这是我的发票类：类发票 < ActiveRecord::Base belongs_to :us...

ruby-on-rails ruby ruby-on-rails-3 custom-data-attribute

回答 3 投票 0

在 Firefox 中带有属性的 querySelector 在 svg 中查找路径时出现错误

我的代码在 Chrome 中运行良好，但在 Firefox 中运行不佳。当我使用带有属性的 querySelector 搜索路径元素时，Firefox 会给出找不到路径的错误。 defs.appendChild(svgGradient); 常量

javascript firefox custom-data-attribute template-literals queryselector

回答 1 投票 0

如何使用ASP.net GridView将数据属性放入TR标签中？

我有一个带有 GridView 的 ASP.net 页面。 GridView 有许多行，每行都有一个关联的 ID 号。我想让 ASP.net 输出类似 ...<...