custom-data-attribute

问题 In my html I have a span element: <span class=\"field\" data-fullText=\"This is a span element\">This is a</span> And I want to get the data-fullText attribute. I tried these two ways, but they didn\'t work (the both return undefined ): $(\'.field\').hover(function () { console.log(\'using prop(): \' + $(this).prop(\'data-fullText\')); console.log(\'using data(): \' + $(this).data(\'fullText\')); }); Then I searched and found these questions: How to get the data-id attribute? and jquery can't

问题 I have next html: <span data-typeId=\"123\" data-type=\"topic\" data-points=\"-1\" data-important=\"true\" id=\"the-span\"></span> Is it possible to get the attributes that beginning with data- , and use it in the JavaScript code like code below? For now I get null as result. document.getElementById(\"the-span\").addEventListener(\"click\", function(){ var json = JSON.stringify({ id: parseInt(this.typeId), subject: this.datatype, points: parseInt(this.points), user: \"H. Pauwelyn\" }); });

问题 I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS. (I would prefer to not have the page styling rely on jQuery if possible) My question regards: Data-Attribute in HTML Background-image in CSS I am using this format for my html thumbnails: <div class=\"thumb\" data-image-src=\"images/img.jpg\"></div> and I assume the CSS should look something like this: .thumb { width:150px;

问题 I\'d like to write a simple jQuery plugin that displays inline modals under specified elements. My idea is for the script to auto-init based on data attributes specified on elements. A very basic example: <p data-modal-target>Hover over me for an inline modal!</p> <div data-modal-content data-modal-align=\"right\" data-modal-trigger=\"hover\" data-modal-offset=\"10px\"><!-- any desired syntax can go here --></div> I\'m just wondering if data-modal-target in the above example is valid, or does

问题 I have a div with an attribute data-myval = \"10\" . I want to update its value; wouldn\'t it change if I use div.data(\'myval\',20) ? Do I need to use div.attr(\'data-myval\',\'20\') only? Am I getting confused between HTML5 and jQuery? Please advise. Thanks! EDIT: Updated div.data(\'myval\')=20 to div.data(\'myval\',20) , but still the HTML is not updating. 回答1: HTML <div id="mydiv" data-myval="10"></div> JS var a = $('#mydiv').data('myval'); //getter $('#mydiv').data('myval',20); //setter

问题 How to get data attributes using jquery .data()? In which case html5 data-* attributes converts to lowercase and camelcase? What are all the main rules to follow while using custom attributes to store data? <input type=\"button\" class=\"myButton\" value=\"click me\" data-productId=\"abc\"/> <input type=\"button\" class=\"myButton\" value=\"click me\" data-product-id=\"abc\"/> <input type=\"button\" class=\"myButton\" value=\"click me\" data-PRODUCT-ID=\"abc\"/> <input type=\"button\" class=\

问题 I\'ve got the following field on an MVC view: @Html.TextBoxFor(model => model.Course.Title, new { data_helptext = \"Old Text\" })</span> In a seperate js file, I want to set the data-helptext attribute to a string value. Here\'s my code: alert($(targetField).data(\"helptext\")); $(targetField).data(\"helptext\", \"Testing 123\"); The alert() call works fine, it shows the text \"Old Text\" in an alert dialog. However, the call to set the data-helptext attribute to \"Testing 123\" does not work

问题 Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role )? 回答1: If you mean using an attribute selector, sure, why not: [data-role="page"] { /* Styles */ } There are a variety of attribute selectors you can use for various scenarios which are all covered in the document I link to. Note that, despite custom data attributes being a "new HTML5 feature", browsers typically don't have any problems supporting non-standard attributes, so you should be able to

问题 Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data When I say “work”, I mean, if I’ve got HTML like this: <div id=\"geoff\" data-geoff=\"geoff de geoff\"> will the following JavaScript: var geoff = document.getElementById(\'geoff\'); alert(geoff.dataGeoff); produce, in IE 6, an alert with “geoff de geoff” in it? 回答1: You can retrieve values of custom (or your own) attributes using getAttribute . Following your example with <div id="geoff" data

问题 I\'m using the jQuery quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute? I\'m using the .on() method to re-bind the click event for sorted items. $(\"#list li\").on(\'click\', function() { // ret = DetailsView.GetProject($(this).attr(\"#data-id\"), OnComplete, OnTimeOut, OnError); alert($(this).attr(\"#data-id\")); }); <script src=\"https://code.jquery.com/jquery-3.3.1.slim.min.js\"></script> <ul id=\"list\" class=\