标签: custom-data-attribute

如何更改此功能以使用该jQuery.contains()方法而不是find()？

我正在使用该功能通过各种属性(即颜色,产品类别,场合等)过滤服装,并且该功能目前仅返回完全匹配.由于项目通常具有多个属性值(即多于一种颜色),我想使用contains()而不是find(),但我无法找出contains()与数据属性一起使用的正确语法

我在这里发布了一个函数的简单例子:http://jsfiddle.net/chayacooper/WZpMh/5/

    $('#filterStyleOptions li a').click(function () {
        var attrStyle = $(this).data('style');
        $('#filterStyleOptions li').removeClass('active');
        $(this).parent().addClass('active');
        if (attrStyle == 'All') {
            $('#content').find('li').show();
        } else {
            // $('#content').find('li').hide();
            $('#content').find('li:not([data-style="' + attrStyle + '"])').hide();
            $('#content').find('li[data-style="' + attrStyle + '"]').show();
        }
        return false;
    });

我attr(data-width)过去data-width常常从 some获取 -属性list-item。我尝试使用这些值来设置该元素的宽度。

问题是 css 不能将字符串处理为width/ height-value。例如：

<foo data-width='100%'></foo>

/* can not work */
foo {
    width: attr(data-width)
}

所以我需要将值从data-attribute 转换为整数（+unit）。

这有可能吗？

我有一个表格，其中包括

<input id="user-id" type="text" data-user-id="" name="message" placeholder="type and send..." class="form-control">

data-user-idHTML5 数据属性。当我提交表单时，我想在 php 类中使用 data 属性的值。如何在php中访问这个数据属性？

我在 WordPress 网站上使用 fullpage.js，并且想使用它的功能之一，即在 li 上添加一个类。但要做到这一点，您需要添加数据属性 data-menunchor 。

我见过这个：

add_filter( 'nav_menu_link_attributes', 'my_nav_menu_attribs', 10, 3 );
function my_nav_menu_attribs( $atts, $item, $args )
{
  // The ID of the target menu item
  $menu_target = 113;

  // inspect $item
  if ($item->ID == $menu_target) {
    $atts['data-menuanchor'] = 's1';

  }
  return $atts;
}

它可以工作，只是它将属性添加到 a 标签并需要它位于 li 标签上。

另外，如果我想对菜单上的所有项目执行此操作。我需要对所有项目执行此功能吗？我想我每次都必须重命名该函数？

谢谢

我遇到了一个问题，即我只从服务器端获取一瓶字符串。我将该字符串分配给数据属性，例如

var uom = serverSideValue // Contains ["one bottle only"]
<div class="uomClass" data-uom="+ JSON.stringify(uom) +"></div>

但是当我在开发人员工具中检查该元素时，它看起来像

data-uom="["one" only"]

如果不是 JSON.stringify

data-uom="one" only

当我尝试访问 uom 时，如下所示

$('.uomClass').data('uom') 

上面的代码行仅给出一个而不是一个水瓶的结果

我在这里做错了什么。我正在动态构建上面的 uom html。请引导我走正确的路。谢谢。

我想知道如何使用Vue js选择表单的数据属性。这里是选择

   <form method="post">
            <select @change="onChange" id="option" class="form-control 
                 sectionprice" required="" name="option">
        <option disabled="disabled" value="">Select Option</option>
                        <option data-type="Option" data-value="Mac Pro 128 GB" data-price="915.56">Mac Pro 128 GB</option><option data-type="Option" data-value="Mac Pro 254 GB" data-price="1300">Mac Pro 254 GB</option></select>
     <input name="realprice" type="hidden" :value="dataprice"/> 
      </form>
<script>
    var imagesection = new Vue({
        el: '#pricesection',
        data: {
            dataprice:'';
        },
        methods:{
        onChange(){
                this.dataprice = this.dataset.price
        },
        }

    })

</script>

我在这里想要实现的是，当选择一个选项时，使用@change，我可以获得所选选项的数据价格。然后隐藏输入字段的值 realprice 将使用 data-price 值进行更新。

伙计们，如果有人帮助我，我将不胜感激。

我的 html 语法如下

<select id="category" name="category">
  <option value="0">Please Select</option>
  <option value="50" data-value="akne">ACNE</option>
  <option value="11" data-value="rednessbumps">Redness / Bumps</option>
  <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
  <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
  <option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>

<select id="category" name="category">
  <option value="0">Please Select</option>
  <option value="50" data-value="akne">ACNE</option>
  <option value="11" data-value="rednessbumps">Redness / Bumps</option>
  <option value="15" data-value="sunspotsfreckles">Sunspots / Freckles</option>
  <option value="16" data-value="agingwrinkles">Aging / Wrinkles</option>
  <option value="17" data-value="dry-sensitive">Dry Sensitive</option>
</select>

在这里我无法获得data-valuein jquery，我应该如何获得？

我有以下使用HTML 5数据属性的元素列表.

<div data-element="INFO-NAME"></div>
<div data-element="INFO-EMAIL"></div>
<div data-element="INFO-ADDRESS"></div>
<div data-element="INFO-ZIP"></div>

我想要做的是获取包含的所有元素的列表

data-element="INFO-*"

我试过$('[data-element="INFO-*"]')但这会返回一个空对象.我该如何检索此列表？

我希望能够检查是否存在以特定值开头的特定数据属性。

例如，假设我有以下HTML代码：

 <div data-attr="123ABC"></div>
 <div data-attr="123456"><div>
 <div data-attr="TEST"></div> 

然后我想找到data-attr以开头的数据标签的任何使用123

 if ($('[data-attr="123"]').length > 0) { 
     //do something
 }

这似乎总是返回，0因为我没有该data-attr="123"怎么做，因此我只能检查以123开头并在此之后有任何内容的特定数据属性？

我有一个数据属性为“ data-layout”的列表，它可以获得两个选项“垂直”和“水平”。

在我的CSS中，我根据布局更改列表项的display属性。

在chrome上，它可以按预期工作，但在IE（在IE11上经过测试）上，它不会通过更改重新绘制屏幕。

如果我输入IE的devtools并在Elements面板中选择其中一项，则只有它重新绘制为正确的状态。

这是问题的重现。

http://fiddle.jshell.net/dimshik/bss3je3u/

谢谢。

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.dataset.layout = 'horizontal';
    } else {
        list.dataset.layout = 'vertical';
    }  
});

[data-layout="horizontal"] li {
    display: inline;
    padding: 0 10px;
}

<ul id="list" data-layout="vertical">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>