标签: custom-data-attribute

数据属性的东西对我来说是新手，只是意识到我需要逃避空格，逗号等。有人可以给我一些有关我的方法的建议吗？下面是我的代码：

#A list holds all the strings to be sent to data-attribute, 
#the sequence and length of the list is dynamic, determined by the user 
#(That's why I need to find a way to escape automatically.

Apt_p = []
Apt_p.append('Relative to planting')
Apt_p.append('Relative to harvest')
Apt_p_j=json.dumps(Apt_p) #convert everything into JSON for future usage

#I think below is the place to let escape happen.
html = """<td id="Apt_p_j" data-val=%s></td>""" %(Apt_p_j)

按照教程http://ejohn.org/blog/html-5-data-attributes/我想调整创建图像工具提示的过程(而不是链接).所以我将"工具提示"类规则调整为通用而不是a特定于标签.

我在js-fiddle中重现了我的努力http://jsfiddle.net/AqPN8/

正如你在小提琴中看到的那样,它确实适用于链接,但不适用于图像.你知道为什么不知道吗？

从技术上讲,我认为:hover同样也应该为此<img>而且<a>.

我有ul各种各样的项目可以有几个可能的data-attribute值之一,像这样:

<ul>
    <li id="li1" data-cat="one">test item
    <li id="li2" data-cat="one">test no 2
    <li id="li3" data-cat="two">test dummy
    <li id="li4" data-cat="three">test no 4
    <li id="li5" data-cat="three">more test
    <li id="li6" data-cat="three">test no 6
</ul>

我试图使用jQuery选择每个不同的第一项 data-cat 价值 -所以在这个例子中,li#li1,li#li3,和li#li4.我已经尝试用它构建每个元素的数组data-attribute,然后.unique像这样排序

var list = $( '[data-cat]' ).get();
listSorted = jQuery.unique( list );
$( listSorted ).addClass('active');

但是代码刚刚选择了所有元素(参见这里的小提琴)

我已经找到了类似于这个问题的答案,但它们似乎都依赖于data-attribute事先了解价值并寻找特定价值.是否可以选择具有特定data-cat值的第一个元素而不事先指定值？

我正在尝试将 jQuery DataTables 中的多列排序用作 HTML5data-属性。这甚至可能吗？

我已经试过了：

<th>Firstname</th>
<th data-orderData="[ 3, 2 ]">Lastname</th>

但它没有用，虽然这很好用：

<th data-orderable="false" data-searchable="false">Edit</th>

我试图将其声明为表data-属性，如下所示：

<table id="myTable" data-columnDefs="[ {'targets': [ 5 ], 'orderData': [ 5, 3, 2 ]} ]">

但这也不起作用，虽然这很好用：

<table id="myTable" data-order="[[ 5, 'asc' ], [ 3, 'asc' ], [ 2, 'asc' ]]">

我在官方文档中找不到关于使用 HTML5data-属性进行多列排序的任何内容。这甚至可以通过 HTML5data-属性实现吗？

我有以下数据属性对象：

<div data-vp="{
      id: "vp-485858383",
      customTwo: "test"
}">
</div>

我正在尝试使用jQuery中的特定id值来定位data-vp：

$(['data-vp with id:vp-485858383'].parent().find('.fa.fa-times').show();

我这样做是为了只显示.fa.fa-times的特定实例，而不显示.fa.fa-times类的所有元素。

我知道上面的选择器显然不能正常工作，但是可以同时将data-vp和特定的ID作为目标吗？

我一直在尝试在新的vue项目中使用feather-icons.我首先使用vue-clie工具初始化项目:

vue init webpack

一旦完成,我跑了:

npm install
npm run dev

之后我通过npm安装了feather-icons,如下所示:

npm install --save feather-icons

完成后,我尝试通过导入main.js文件中的模块来使用图标:

main.js:

import 'feather-icons'

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {
    App
  }
})

然后我尝试在Hello组件中使用一个图标:

Hello.vue:

<template>
  <div>
    <h1> Hello World!</h1>
    <i data-feather="flag"></i>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }

</script>
<style> …

使用（自定义）jQuerydata-attributes检索显示这些图标的元素，我成功地使用以下工作代码更改了图标：

<i class="glyphicon glyphicon-check" data-year="2014" data-flag_check="1"></i>
...
<script>
   ...
   $('i[data-year="2014"]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

但是，如果我尝试用变量替换常量2014，我的代码将停止工作。

var yearIn = "2014";
$('i[data-year=yearIn]').removeClass('glyphicon-check').addClass('glyphicon-unchecked');

是否可以使用变量执行此操作？

如果是这样，我的语法有什么问题？

我尝试创建选项，并在使用此模式的选择中动态设置jQuery对象的数据后，但不起作用。

这是我的印刷店选项的HTML代码，并将其data-attribute命名为“ data-last-sync-shop”

<select id="shopSelect" 
        onchange="$('#lastSync').text($(this).data('lastSyncShop'));" 
        name="shop_select">

    <option value=""></option>

    <?php foreach ($shops as $code => $info) { ?>
        <option value="<?= $code ?>" 
                data-last-sync-shop="<?= $info['last_sync'] ?>">
            <?= $info['description'] ?>
        </option>
    <?php } ?>
</select>
<span id="lastSync">-</span>

如果我调试onchangeselect事件，则数据属性未定义，但如果我检查PHP生成的HTML代码，则正确填充了选项的数据属性。为什么？我哪里错了？感谢您的回答。

我console.log()在这里添加：

<select id="shopSelect" 
        onchange="console.log($(this).data('lastSyncShop'));" <!-- undefined --> 
        name="filtro[codice_shop_select]">

我的表单中有一个下拉菜单。每个选项都有 3 个与其关联的数据属性。当选择一个选项时，我调用一个函数，将隐藏的 html 对象的值设置为每个数据属性的值，以便我可以在下一页上提取该信息。然而，数据属性的值始终显示为“未定义”。我究竟做错了什么？

 <script>
     function change_charge(x)
     {
     alert (x.dataset.amount); 
     }
 </script>

 <select name="description"  id="description" onchange="change_charge(this)">
     <option value="Test" data-amount="10.00" data-type="charge" >TEST      </option>
  </select>

我希望警报显示数据量的值，但它却显示“未定义”

我也尝试过：alert(x.getAttribute('data-amount'));

但这会返回“null”。

我需要一个 React prop 来处理 React 组件的 HTML div 元素部分的所有可能的 html 属性，但我遇到了 Typescript 严格性与 React 可能性的问题。

这里是组件：

import React from 'react'

type DivAttrs = {
  container?: React.HTMLAttributes<HTMLDivElement>
}

...

<div {...divAttributes?.container}>

这里提供给组件的 prop const ：

const divAttributes: DivAttrs = {
  container: {
    'aria-describedby': 'test',
    'data-custom-attribute': 'test',
    'data-random-attribute': 'test',
    id: 'test'    
  }
}

道具data-custom-attribute并data-random-attribute给出这些错误

(property) 'data-custom-attribute': string
Type '{ 'aria-describedby': string; 'data-custom-attribute': string; 'data-random-attribute': string; id: string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
  Object literal may only …