custom-data-attribute 相关问题

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

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

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

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

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

我正在尝试借助数据属性创建响应式滑动滑块来访问滑动滑块功能。 这是我的 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); } });

如何使用 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. });

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

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

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

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

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

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

无法将数组传递给 Bootstrap 工具提示的 HTML 数据属性

我正在使用 Bootstrap 5.2 版本。我正在尝试使用工具提示插件的fallbackPlacements选项。问题是fallbackPlacement需要一个数组，但似乎不接受一个...

Event.target.dataset 返回未定义的 javascript

我在尝试获取任何 html 元素的数据属性时遇到一些问题。 问题是我在 30% 的情况下获取数据属性。其余的返回未定义。 这就是我的

如何从分配给不同 JavaScript 变量的单个选项选择中获取多个数据属性？

我正在尝试从下拉菜单中的多个数据属性分配2个不同的javascript变量值。一个值工作正常，另一个值一直返回 null。有什么建议吗...

jquery 滚动到 data-image-id

我无法在包含各种图像的 div 容器上设置 id，但想要创建一个带有指向图库各个部分的跳转链接的导航。 在我的图像上设置的一个元素

有没有办法使用JavaScript向元素添加空白数据属性？

我想用 JavaScript 创建一个如下所示的元素： 将 null 或 undefined 传递给 setAttribute() 或数据集属性会产生一个值...

WordPress nav_menu_link_attributes 不起作用

我试图向所有菜单项添加数据属性，但它根本不起作用。我也使用 wp_nav_menu 来调用我的菜单步行器。 函数 menu_anchor_attributes ( $atts, $item, $args...

自定义元素上的非数据属性可以成为标准属性吗？ [已关闭]

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

我们应该在自定义 Web 组件中使用数据属性吗？

在本文中，作者建议在语法突出显示 Web 组件的设计中使用数据属性。 给出的理由是： 从技术上讲，浏览器会让我们编写属性...

如何在HTML元素中设置数据属性

我有一个带有属性 data-myval =“10”的 div。我想更新它的值；如果我使用 div.data('myval',20) 不会改变吗？我只需要使用 div.attr('data-myval','20') 吗？ 我得到确认了吗...

HTML 数据属性和 jQuery 的 .data() 是一样的吗？

在 HTML 中，可以为元素设置自定义“data-”属性，例如 jQuery 框架具有执行类似操作的方法（.data() 等）。我的问题是... 在 HTML 中，可以为元素设置自定义“data-”属性，例如 <div data-blah="blah"> jQuery 框架有方法来做类似的事情（.data() 等）。我的问题是 jQuery 方法只是操作和读取这些 html5 数据属性，还是它们引用不同的 jQuery 类型数据属性？ 不，完全不同的事情。 jQuery 的 .data() 甚至在 W3C 将它们添加到 HTML 版本 5 之前就已经存在了。 详情请参阅https://api.jquery.com/data/。 要从 HTML 标记获取 HTML 数据属性值，请尝试： jQuery('selector here').attr('data-blah');

Jquery DataTable 在运行时更新 `data-sort` 属性不影响排序

我有一个数据表，其中第一个 td 中有复选框 有些正在检查，有些则未从数据库中检查 默认情况下，它不会对选中/未选中进行排序，因此我还添加了数据排序属性...

React 的类型声明例如React.HTMLAttribute<HTMLButtonElement> 支持开箱即用的自定义数据属性吗？

我正在尝试创建一个可以传播到 React 组件中的对象，并且该对象必须包含 HTML 自定义数据属性。 从 'react' 导入 { HTMLAttributes } 接口 FooProps 扩展...

如何删除 td 具有特定数据属性值的 tr

我试图在ajax成功后从DOM中删除一个tr，其中这个tr的td具有特定的数据值 这是 HTML： 第一 我试图在ajax成功后从DOM中删除一个tr，其中这个td的tr具有特定的data-value值 这是 html: <tr> <td data-value="1">First</td> </tr> <tr> <td data-value="2">Second</td> </tr> <tr> <td data-value="3">Third</td> </tr> ...... 我的ajax javascript: success: function (data) { var identity = data.val; // gives me the number 2 // find td which has data-value of 2 and remove the corresponding tr of it from DOM $('td[data-value=identity]').closest('tr').remove(); // does not work }, 我怎样才能实现这个目标？ 我建议您非常具体地了解带有“td”标签的表格。 $('td[data-value="'+ identity +'"]').closest('tr').remove(); 评论中回答的上述代码仅适合您： 如果 HTML DOM 中有单个表，其中“tr”标签作为“td”标签的父元素，其上有 data-value=“identity”。 如果 HTML DOM 上有多个表，此代码将从 DOM 内的开始/第一个“元素”开始检查，一旦找到具有 data-value='identity' 属性的“td”标签，它将删除父“tr”元素，无论 DOM 内可能有多个表，或者您希望从表 2 中删除“tr”标签，但它按照上面的代码从表 1 中删除了“tr”标签。 如果您想定位表内的任何标签（因为在未来的开发中同一页面上可能有多个表），在 jQuery 选择器中指定表名称并根据要求将其遍历到特定的子元素始终是一个很好的做法). 您可以将上面的代码即兴编写为， $('#specific-table-name tbody td[data-value="'+ identity +'"]').closest('tr').remove(); 此代码将首先在整个 DOM 中查找表名称，然后遍历该表的“tbody”标签并搜索具有 data-value="identity" 的“td”元素 -> 然后删除最近的“tr”。 注意：如果要删除多个 data-value="identity"，请使用 .each/.map 方法迭代表以获得所需结果。