Web Front-end
HTML Tutorial
To add important custom information to div elements, should I use id, class, name or others? _html/css_WEB-ITnose
To add important custom information to div elements, should I use id, class, name or others? _html/css_WEB-ITnose
For example, there are 50 props in a user's shopping cart in a web mall. Each prop is a div. The prop id needs to be added to the attributes of each div element as an important custom information (to facilitate jquery captures at any time), for example, the value of this attribute is item-123456, then should I define the id, class or name as item-123456? Or is there a better way?
Supplement 1: No more than one piece of similar custom information will be added to the same element, because the so-called custom information is mainly the id of a certain concept in the web application
Supplement 2: It is assumed that two ids may appear The same props are separated into two products instead of stacked and displayed in one div
1. If ID is used, it will lead to duplicate IDs; moreover, there can only be one ID, in some practical examples You may need to add this custom information to an element with an existing ID, but there is no way to add it
2. If you use class, the prop div itself may have several class attributes, such as 'item', 'selected' Wait, if you add 'item-123456', it seems that the current js jquery is not convenient to obtain the id value of the item (i.e. 123456)
3. If you use name, I don’t know whether it is safe and stable. I always feel that name is input-specific. Enjoy attributes
4. Or there are other better solutions
Please give me some advice, thank you!
Reply to discussion (solution)
Use attributes, data-
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="item_1" itemId="item-123456"></div> <script> // 给标签设置自定义属性 // 参考 JavaScript权威指南_122_第15章_脚本化文档_15.4-属性-获取和设置非标准HTML属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753659 var item_1 = document.getElementById( "item_1" ); console.info( item_1.getAttribute( "itemId" ) ); </script> <div id="item_2" data-item-id="item-123456"></div> <script> // HTML5 的 data-* 自定义属性 // 参考 JavaScript权威指南_123_第15章_脚本化文档_15.4-属性-数据集属性 // http://blog.csdn.net/wuqinfei_cs/article/details/46753693 var item_2 = document.getElementById( "item_2" ); console.info( item_2.dataset.itemId ); </script></body></html>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use classes and methods in Python
Apr 21, 2023 pm 02:28 PM
Concepts and instances of classes and methods Class (Class): used to describe a collection of objects with the same properties and methods. It defines the properties and methods common to every object in the collection. Objects are instances of classes. Method: Function defined in the class. Class construction method __init__(): The class has a special method (construction method) named init(), which is automatically called when the class is instantiated. Instance variables: In the declaration of a class, attributes are represented by variables. Such variables are called instance variables. An instance variable is a variable modified with self. Instantiation: Create an instance of a class, a specific object of the class. Inheritance: that is, a derived class (derivedclass) inherits the base class (baseclass)
Replace the class name of an element using jQuery
Feb 24, 2024 pm 11:03 PM
jQuery is a classic JavaScript library that is widely used in web development. It simplifies operations such as handling events, manipulating DOM elements, and performing animations on web pages. When using jQuery, you often encounter situations where you need to replace the class name of an element. This article will introduce some practical methods and specific code examples. 1. Use the removeClass() and addClass() methods jQuery provides the removeClass() method for deletion
What does class mean in python?
May 21, 2019 pm 05:10 PM
Class is a keyword in Python, used to define a class. The method of defining a class: add a space after class and then add the class name; class name rules: capitalize the first letter. If there are multiple words, use camel case naming, such as [class Dog()].
Detailed explanation of PHP Class usage: Make your code clearer and easier to read
Mar 10, 2024 pm 12:03 PM
When writing PHP code, using classes is a very common practice. By using classes, we can encapsulate related functions and data in a single unit, making the code clearer, easier to read, and easier to maintain. This article will introduce the usage of PHPClass in detail and provide specific code examples to help readers better understand how to apply classes to optimize code in actual projects. 1. Create and use classes In PHP, you can use the keyword class to define a class and define properties and methods in the class.
Vue error: Unable to use v-bind to bind class and style correctly, how to solve it?
Aug 26, 2023 pm 10:58 PM
Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? In Vue development, we often use the v-bind instruction to dynamically bind class and style, but sometimes we may encounter some problems, such as being unable to correctly use v-bind to bind class and style. In this article, I will explain the cause of this problem and provide you with a solution. First, let’s understand the v-bind directive. v-bind is used to bind V
How to determine whether an element has a class in jquery
Mar 21, 2023 am 10:47 AM
How jquery determines whether an element has a class: 1. Determine whether an element has a certain class through the "hasClass('classname')" method; 2. Determine whether an element has a certain class through the "is('.classname')" method.
![How to solve the '[Vue warn]: v-bind:class/ :class' error](https://img.php.cn/upload/article/000/465/014/169300902772563.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
How to solve the '[Vue warn]: v-bind:class/ :class' error
Aug 26, 2023 am 08:17 AM
How to solve the "[Vuewarn]:v-bind:class/:class" error During the development process of using Vue, we often encounter some error prompts. One of the common errors is "[Vuewarn]:v-bind:class" /:class" error. This error message usually appears when we use v-bind:class or :class attribute, indicating that Vue cannot correctly parse the class value we set. Then, if
How SpringBoot encrypts and protects class files through custom classloader
May 11, 2023 pm 09:07 PM
Background Recently, key business codes have been encrypted for the company framework to prevent the engineering code from being easily restored through decompilation tools such as jd-gui. The configuration and use of the related obfuscation scheme are relatively complex and there are many problems for the springboot project, so the class files are encrypted and then passed The custom classloder is decrypted and loaded. This solution is not absolutely safe. It only increases the difficulty of decompilation. It prevents gentlemen but not villains. The overall encryption protection flow chart is shown in the figure below. Maven plug-in encryption uses custom maven plug-in to compile. The class file specified is encrypted, and the encrypted class file is copied to the specified path. Here, it is saved to resource/corecla.
