标签: custom-data-attribute

我有一个关于Rails 3如何与XHTML doctypes一起工作的简单问题.由于Rails 3使用UJS进行其ajax调用(甚至是普通调用,如删除调用),并且使用HTML5数据属性,因此,由于XHTML不支持数据属性,标记是否会自动无效？

学习如何利用Bootstrap,我注意到缩略图的图像源有奇怪的标记(至少对我来说很奇怪).

<img data-src="holder.js/260x120" alt="260x120" style="width: 260px; height: 120px;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQQAAAB4CAYAAAAUn4wEAAAGP0lEQVR4Xu3aPUsdWxQG4LEwKiSFTbQTsUwsRfDvp7KRVBFrEVIEsRFT+HHvHJjDODrH96ghQ9aT5nLD8rjXs/Z+3TNx5fLy8qHxhwABAv8LrAgE+4AAgU5AINgLBAjMBQSCzUCAgECwBwgQeCrghmBXECDghmAPECDghmAPECCwQMAjg+1BgIBHBnuAAAGPDPYAAQIeGewBAgQSAe8QEiU1BIoICIQig9YmgURAICRKaggUERAIRQatTQKJgEBIlNQQKCIgEIoMWpsEEgGBkCipIVBEQCAUGbQ2CSQCAiFRUkOgiIBAKDJobRJIBARCoqSGQBEBgVBk0NokkAgIhERJDYEiAgKhyKC1SSAREAiJkhoCRQQEQpFBa5NAIiAQEiU1BIoICIQig9YmgURAICRKaggUERAIRQatTQKJgEBIlNQQKCIgEIoMWpsEEgGBkCipIVBEQCAUGbQ2CSQCAiFRUkOgiIBAKDJobRJIBARCoqSGQBEBgVBk0NokkAgIhERJDYEiAgKhyKC1SSAREAiJkhoCRQQEQpFBa5NAIiAQEiU1BIoICIQig9YmgURAICRKaggUERAIRQatTQKJgEBIlNQQKCIgEIoMWpsEEgGBkCipIVBEQCAUGbQ2CSQCAiFRUkOgiIBAmOCgT09Pm4uLi/nKPn361BweHj5a6eXlZfP9+/fm/v5+9vfP1ZyfnzdnZ2fzr9vd3W329vZe3fHJyUnTft+tra1mf3//0ecka37v9by6EV84KiAQJrY5ukM3XFb/wA/DoKvtH9Th4etqXhsK/c8bBkKy5vdez8TG9s8sRyBMaJS3t7fNt2/fmru7u6Y7uP2D9PXr1+bz58/N8fFxc319/aRmZWWlOTo6atbW1uY13eHtfoKvr6/Pbhurq6tx58MD3w+EZdf8HuuJF65waQGBsDTZn/uC7vB3B3tjY6MZHridnZ1ZaLSPCu3hb2uGf/o3iDZEtre3Z1f99hHj4eFh9nU3NzfzR44ufIZf1w+f9nu0YfL79+9HjwzJmjc3N+ffa2w9z/Xx56R98piAQJj43hge0g8fPswOV/vf9oBeXV3NOuj/1B4e/mGwdIey+8nffs7BwUHT/n978+g+qw2d9jby8ePH5suXL09uHWN0Y2vuwmhsPRMfRYnlCYQJj7k7kO0h7d4hjD2Lt20MaxbdNNqXi/3bR3uL+PnzZ9P/mj5Nfy3PvVTsahet+aX1THgUZZYmECY66v7B6h+kfiAM3zN0db9+/Zr960JyANM3/0kgvLTmZD0THUeZZQmECY567GC1S00eB7rHiuSK3r8ljN0O2u/7UiC8dc3tDcWfvy8gEP7+DB6tYNHBWjYQ2s966SXe8PcHxh4HFgVCuuZkPRMbR7nlCISJjbx70bfMs/zwTX/6z47920b70vDHjx+zm0AXIuk7hNes+S3/DDqxkf1TyxEIExrn2C8cdUt87ncT+stf5heTnvuJv+iQjt0Q3rrm1/6i1ITG9k8tRSBMaJzD6/twaf3DMzyIz131F70w7L7X2Iu+4eeNBcIya05fYE5oJOWWIhDKjVzDBMYFBILdQYDAXEAg2AwECAgEe4AAgacCbgh2BQECbgj2AAECbgj2AAECCwQ8MtgeBAh4ZLAHCBDwyGAPECDgkcEeIEAgEfAOIVFSQ6CIgEAoMmhtEkgEBEKipIZAEQGBUGTQ2iSQCAiEREkNgSICAqHIoLVJIBEQCImSGgJFBARCkUFrk0AiIBASJTUEiggIhCKD1iaBREAgJEpqCBQREAhFBq1NAomAQEiU1BAoIiAQigxamwQSAYGQKKkhUERAIBQZtDYJJAICIVFSQ6CIgEAoMmhtEkgEBEKipIZAEQGBUGTQ2iSQCAiEREkNgSICAqHIoLVJIBEQCImSGgJFBARCkUFrk0AiIBASJTUEiggIhCKD1iaBREAgJEpqCBQREAhFBq1NAomAQEiU1BAoIiAQigxamwQSAYGQKKkhUERAIBQZtDYJJAICIVFSQ6CIgEAoMmhtEkgEBEKipIZAEQGBUGTQ2iSQCAiEREkNgSICAqHIoLVJIBEQCImSGgJFBARCkUFrk0AiIBASJTUEiggIhCKD1iaBREAgJEpqCBQREAhFBq1NAonAfyCREfyopr43AAAAAElFTkSuQmCC">

这里发生了什么,为什么要这样做？在base64中的某个时刻图像是否以某种方式保存到本地存储？

为了澄清,我问的是这个src="image:/部分.

使用jQuery,我试图data-inject从服务器返回的HTML字符串中找到具有属性的所有元素.这是一个示例HTML字符串:

var html = '<div class="container-fluid">
              <div class="row-fluid">
                <div data-inject="ViewModel1" class="span12"></div>
              </div>
            </div>
            <div data-inject="ViewModel2" class="navbar navbar-fixed-bottom"></div>';

我似乎无法找到一种方法来获得两个divs,问题似乎是我开始使用HTML字符串.

这是一个小提示,显示只需查询DOM,就可以$('[data-inject]')按预期返回两个元素.但是,$('[data-inject]', html)仅使用返回一个元素(ViewModel1元素)查询HTML字符串.

任何人都知道我做错了什么以及如何获得预期的结果？

我想用html5数据属性更改图像源.我已经尝试了很多方法,但到目前为止仍然无法解决,因为这里的演示是代码;

HTML标记:

<img src="http://placehold.it/300x250&text=Default%20Image" data-imgSmall="http://placehold.it/300x250&text=Small%20Image" data-imgMedium="http://placehold.it/300x250&text=Medium%20Image" data-imgLarge="http://placehold.it/300x250&text=Large%20Image" />

<button class="small">Small Image</button>
<button class="medium">Medium Image</button>
<button class="large">Large Image</button>

jQuery代码:

var ImgSmall = $('img').data('imgSmall'),
    ImgMedium = $('img').data('imgMedium'),
    ImgLarge = $('img').data('imgLarge'),
    img = $('img');

$('button').click(function () {
    if ($(this).hasClass("small")) {
        img.attr('src', ImgSmall);
        alert(ImgSmall);
    }
    if ($(this).hasClass("medium")) {
        img.attr('src', ImgMedium);
        alert(ImgMedium);
    }
    if ($(this).hasClass("large")) {
        img.attr('src', ImgLarge);
        alert(ImgLarge);
    }
});

但是这段代码仍然不能正常工作,plz建议我错了,先谢谢:)

我想通过链接使用来创建一个新元素并同时创建一个数据属性 jQuery.data

所以在这里的例子中我想创建:

<div data-test="test">test</div>

我试过了:

$("<div>").data(this, 'test','test').append('test').appendTo('body');

没有成功,有可能吗？

这里是一个小提琴一起玩

我试图找到具有data-direction属性的标签.不知何故,它总是未定义的.我所试图做的就是值data-direction和data-cellId.有任何想法吗？

var row = $('<tr data-cellId="' + cell.fatherId + '" data-direction="' + cell.direction + '"/>');
var nameColumn = $('<td class="port-name-col" data-cellId="' + cell.fatherId + '">' +cell.value.name + '</td>');
var btnColumn = $('<td class="port-btn-col"><button type="button" title="Remove" class="btn btn-default btn-xs x-button-icon btn-delete-port"><span class="glyphicon glyphicon-trash"></span></button></td>');
row.append(nameColumn);
row.append(btnColumn);

事件监听

$(document).off('click', '.btn-delete-port').on('click', '.btn-delete-port', function (event) {
    var elem = event.target || event.srcElement;
    //find tr element that has cellID attribute
    var tr = $(elem).find("tr.data-cellId");
    alert($(elem).parent().parent().html())
});

我有许多具有预定义属性的元素data-key="foo".现在,在更新此元素值后,我还更新了它的data-keyattribute($(this).data('key', 'boo');).之后我无法再使用选择器选择它[data-key="boo"].我在这做错了什么？
我不想再次循环所有元素并检查它的data-key属性值.另外据我所知,:data(key)选择器无法按键和值选择元素？

$(document).ready(function() {
  $('[data-key="foo"]').data('key', 'boo');

  setTimeout(function() {
    $('[data-key="boo"]').css('color', 'green');
    $('#element').append(' - Now it must be green, because data-key now is ' + $('#element').data('key'));
  }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-key="foo" id="element">MAKE THIS GREEN</div>
<div data-key="boo" >data-key="boo" by default...</div>

基本上我有3个自定义属性data-pageName,data-defaultOption,data-options.

我遇到的问题是当我传入我的子组件时,我得到一个意外的令牌错误,因为它是这样的:

const pageContent = ({data-pageName, name, onChange, data-defaultOption, value, data-options}) => {
/*return here*/
};

基本上该-符号导致错误.

如何将其包括在内data-pageName而不是作为data - pageName？

这就是我调用组件的方式:

<pageContent data-pageName={this.state.pageClicked} onChange={this.closeMenu} data-defaultOption={this.state.tmpDefaultOption} value={this.state.tmpValue} data-error={this.state.tmpError} data-options='a'/>

如何检查div是否具有数据属性，并删除div（如果具有该数据属性），相反的工作方式如下：

$("div[id='foo']").not('[data-type=edit]').remove();

我在div中有一些项目data-order附加了data属性:

<div class="list">
   <a href="#" data-order="4">Thing 4</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
</div>

但是我试图让它们显示数字顺序(升序 - 1,2,3等):

<div class="list">
   <a href="#" data-order="1">Thing 1</a>
   <a href="#" data-order="2">Thing 2</a>
   <a href="#" data-order="3">Thing 3</a>
   <a href="#" data-order="4">Thing 4</a>
</div>

我有这个:

  $(".list a").sort(function(a, b) {
    return $(a).attr("data-order") > $(b).attr("data-order");
  }).each(function() {
    $(".list").prepend(this);
  });

但这似乎真的搞乱了订单.所以我不太清楚我做错了什么,或者是否有更简单的方法可以让它们正确排序.