custom-data-attribute

问题 I would like to implement a check list by list item (li). I use data-checked attribute to keep the checking state. I set the icon color with css selector ('true' = black and 'false' = white color). It work fine when the page display, all tasks show the white icon as their default data-checked value is 'false'. But when I click the list items, the data-checked value is modified to 'false', but the color does not change to black. I have checked the value by alert them. They are properly. What

问题 I've got stuck at one issue that, I am getting string from server side as one bottle only . I am assigning that string to data attribute like var uom = serverSideValue // Contains ["one bottle only"] <div class="uomClass" data-uom="+ JSON.stringify(uom) +"></div> But when I inspect that element in developer tools, it is appearing like data-uom="["one" only"] If not JSON.stringify data-uom="one" only When I am trying to access uom, like below $('.uomClass').data('uom') above line of code

问题 I am using jQuery to filter product items on a page (hide and display DIVs) I am using filter as a replacement since PHP $_GET is a bit old fashion we're trying to do this via jQuery. I using filter() and data attribute. How can I turn off the current selection of checkboxes except the existing item? How can I hide the items based off selection and unhide when not? HTML <input type="checkbox" id="drama" onClick="filterCategory(this.value)" value="drama" /> Drama<br /> <input type="checkbox"

问题 This is truly bizarre. If I use jQuery's .find() to find child elements that have data attributes during a scroll event, then scrolling the page will repeatedly add and remove an ID to the parents of those elements. It's difficult to describe, but here's a reproducible test case: http://jsfiddle.net/8fouvx9p/ var groups = $(".group"); $(window).bind("scroll resize orientationchange", function() { showGroup(); }); function showGroup() { $(groups).each(function() { var group = $(this), elements

问题 On elements I can specify the data attributes as, e.g. <div data-widget-type="MyWidgetType1" data-property1="20" data-property2="test"> ... </div> I want to capture these in a class e.g. .MyClass1 { data-widget-type:"MyWidgetType1"; data-property1:"20"; data-property2:"test"; } <div class="MyClass1"> ... </div> Is there a way to specify data attribute values in CSS? 回答1: CSS is not HTML. You cannot set or change the value of an HTML attribute using CSS. Besides, why would you do this? HTML

问题 I'm trying to create a form with some custom data attributes on the inputs: <input type="text" data-family="Dinosaurs"> This seemed like a nice clean way to have easy front-end access (haha!) with jquery: $("[data-family='Dinosaurs']").doSomething() The problem is I can't get Rails (3.0.3) to render the attribute. <%= f.text_field :question, :id=>"poll_question", :class=>"BigInput", :style=>"width:98%;", :attributes=>"data-submit_clear='1'" %> I've tried many permutations to no avail and can

问题 I think I'm using removeData correctly but it doesn't seem to be working, here's what I'm seeing in the dev console, could anyone explain what I'm doing wrong? I'm outputting the current data attribute value, calling removeData, then outputting the value again and its still there. $('.questionList > li').eq(1).data('fieldlength') 3 $('.questionList > li').eq(1).removeData('fieldlength'); [ <li class=​"questionBox" data-createproblem=​"false" data-fieldlength=​"3" data-picklistvalues data

问题 I usually saw html data-attribute (s) to add specific values/parameters to html element like Bootstrap that uses them to " link " buttons to modal dialog to be opened, etc. <button type="button" class="close" data-dismiss="modal" aria-label="Close"> Now, I see that an almost famous CSS framework, Kube, in its new version extensively uses simple custom attribute such as in following: <column cols="4">4</column> <span class="label label-black" outline bold>Black</span> Other in-action examples

问题 What is the difference between href and data-href attribute in html <a></a> tag? My current code is written below: <a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> and when I'm changing it to <a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a> it's not redirecting to verify_phone_process_1.html page. 回答1: Global HTML data-* attributes are

问题 The html object: <div data-myAttribute="test"></div> The code: var $o = $("div"); $.each($o.data(),function(k,v){ console.log(k); //writes 'myattribute' instead of 'myAttribute' }); How do I preserve the case of the attribute? 回答1: If your goal is to target myAttribute as key of dataset property, you should use data-my-attribute : <div data-my-attribute="test"></div> See following link regarding camelCased rule: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset PS: as