Encountering unexpected behavior with the .data() method

I'm encountering an issue with my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$(".classy").data("read","hi");//Not working .working is$("div").attr("data-read","hi");

});</script>
<style>
.classy[data-read='hello']{background:#000;}.classy[data-read='hi']{background:#fff;}</style>
</head>

<body>
<div class="classy" data-read="hello">a</div>
</body>
</html>

After the document is ready, the data-read attribute of .classy changes to hi. However, when I have a CSS style design for .classy[data-read='hi'], it does not work when using the .data() method to manipulate the data-read attribute. It only works when I use the .attr() method instead. Why is this happening?

javascriptjqueryhtmlcssattr

Answer №1

There seems to be a misunderstanding regarding the purpose of data-xxx. This attribute is actually used to store data within HTML tags, which can later be accessed using jQuery's .data() method.

For example:

console.log($('.classy').data('read'));

$(".classy").data("read","hello");

console.log($('.classy').data('read'));

The output will be:

hi
hello

It's important to note that modifying this data will not affect the original data-xxx attributes of the element, making it unsuitable for conditional CSS styling. Instead, consider using .addClass(), .toggleClass(), and .removeClass() with CSS class selectors.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

invoke the getJson function

I am trying to display the data from my JSON file within a div tag on my HTML page. Below is my jQuery code: $(document).ready(function () { $("#driver").click(function (event) { $.getJSON('data.json', function (em) { ...

jqueryhtmljson

The error of "No 'Access-Control-Allow-Origin' header is present on the requested resource" persists even after implementing the Access-Control-Allow-Origin header

I'm trying to retrieve JSON data from a Firebase cloud function. The JSON URL works fine on the browser and my Android app, but I encounter issues when trying to fetch it in my JavaScript code. This results in an error message: No 'Access-Cont ...

javascriptjsonnode.jsfirebasegoogle-cloud-functions

Tips for concealing a column within a jqgrid subgrid

Is there a way to conceal a column within a subgrid? Many thanks! ...

jqueryjqgrid

Is there a way to enable a clickable imagemap area using jQuery?

Example showcasing different behaviors in various browsers (jsfiddle link): <!DOCTYPE html> <html> <head> <title>Browser Behavior Test</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/ ...

jqueryhtmlcssimagemap

Utilizing C# ASP.NET to Extract Data from a Web Page Post JavaScript Execution

Looking to extract all links from a web page in order to review where cookies are being set for compliance with UK legislation. In an effort to streamline the process, I am exploring automation options to save time. However, a challenge I am facing is tha ...

c#javascriptasp.net.nethtml

Overlap of sub menus

Seeking assistance from a CSS expert for a challenge I am facing. I am currently working on a toggle menu for mobile view, and encountering issues with the submenu. Any list item placed below another one with children is not visible. Removing the parent l ...

javascriptcss

List of items:1. The first item is elevated in its position

Can anyone explain why the first li item is displaying higher than the rest when I assign an id or class to the div element? Take a look at the code snippet below: <div id="pickList"> <ul *ngFor="let channel of currentPickSelection"> ...

htmlcssangular

.toggleClass malfunctioning inexplicably

I've been struggling to make a div box expand when clicked and revert to its original size when clicked again. It seems like a simple task, but no matter what I try, I can't seem to get it right. I'm not sure where I'm going wrong, as t ...

javascriptjqueryhtmlcsshover

Tips on extracting a value from a subscription

I am trying to figure out how to pass a value from a subscribe function to a variable so that I can manipulate it later on. For example: getNumber: number; I need to be able to access and use the variable getNumber in the same .ts file. someMethodT ...

javascriptangulartypescript

Initiating a single AJAX call, yet processing multiple requests on the server side

Currently, I am facing an issue with sending ajax HTML DELETE requests from my website to a RESTful Web Service (Asp.NET MVC 4 Web-Api ApiController). The goal is to delete selected data from an HTML table by using jQuery to get the selected row. Upon cli ...

jqueryajaxasp.net-mvcasp.net-web-api

What is causing the inefficacy of this particular SQL request method, while the alternative one proves effective?

It's surprising that the one not working is from the mssql package page. Why isn't it functioning on my machine? What am I missing here? The other example I found online works perfectly. On a side note - should these requests be done asynchronou ...

javascriptnode.jsexpress

Adjust the background image color with CSS styling

I have a collection of icons that I would like to incorporate into my application. These icons primarily consist of glyphicons with a few others mixed in. I want the HTML structure to mimic that of a glyphicon, specifically: <a href="#"> <spa ...

htmlcss

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

javascriptangularjshtmlaccessibilityvoiceover

rendering google charts using jade template

I am facing an issue while trying to display a google annotated chart on my jade project. I managed to successfully load a pie chart, but I am having trouble rendering a chart that requires the container element size to be explicitly defined. You can find ...

cssexpressgoogle-visualizationpug

Methods for transferring data to controller in Angular Modal service

After implementing the angular modal service discussed in this article: app.service('modalService', ['$modal', function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, m ...

javascriptangularjstwitter-bootstrap

I require limitless onclick functionality, but unfortunately, transitions are not functioning as expected

I'm currently working on creating a dynamic photo gallery, but I've encountered a couple of issues that need to be addressed... The "onclick" function in my JavaScript only allows for a single click, whereas I need it to be able to handle mul ...

javascriptcssonclickgallerycss-transitions

Creating a color icon for StackExchange using HTML

I am currently working on building my personal website. I am looking to include a link to my Stack Exchange profile on my site using the Stack Exchange icon. However, the icons available in Font Awesome are grayscale and not colored like other icons such a ...

htmlcsscolorsiconsstackexchange

In Angular, the ng-click directive that assigns the value of tab to $index does not seem to be functioning properly

I encountered an issue within my app <li ng-repeat="name in tabs track by $index" ng-class="{selected: tab==$index}" ng-click="tab = $index">{{name}}</li> After clicking on each item, the selected class remains enabled and switching to anothe ...

javascriptangularjs

What steps can be taken to align the description in the center of the div?

I am working on an image slider where the description slides in from left to right. My goal is to align the text justified and center it on the page. However, when I try adding CSS properties, it doesn't seem to have any effect. setting.$descpanel=$( ...

javascriptcss

retrieve the value of a specific key using JSON stringify

[{"displayorder":"1","menuname":"DashBoard","menuid":"5","menuurl":"dashboard.php"},{"displayorder":"3","menuname":"Accounting Module","menuid":"3","menuurl":""},{"displayorder":"4","menuname":"My Profile","menuid":"4","menuurl":"myprofile.php"},{"displayo ...

javascriptjsonstring