Javascript 使用jquery和css显示div的自定义属性

我是一个爱好编码和有一个问题，我似乎无法找到答案。我认为这会很简单，但也许我没有搜索正确的语法。。。希望你能帮助我

我在一个页面上有一系列带有许多自定义属性的

s。以下是一个例子：

<div class="face" rownumber="1" rowposition="0" playername="Jo Smith" playerrole="Captain" 
     playerposition="0" style="position: absolute; left: 772.632px; top: 215.934px; 
     width: 46.5668px; height: 46.5789px; color: rgb(255, 255, 255);
     background-color: rgb(255, 0, 0);"></div>

在css中，如何让所有带有“face”类的

显示“rownumber”。。。。然后点击一个按钮，它们都会显示“playername”。。。。然后点击另一个按钮，它们都会显示“playerrole”

感谢您阅读并希望能够回答……

使用jQuery和

.attr（attributeName）

函数获取属性值，然后再次使用jQuery在需要的地方添加该文本（属性值）。

使用jQuery和

.attr（attributeName）

函数获取属性值，然后再次使用jQuery在需要的地方添加文本（属性值）。

$（文档）.ready（函数（）{
$（“.face”）。每个（函数（）{
var rowNumber=$（this.attr（'rowNumber'）；
$（此）.text（行编号）；
});
});
$（“#pn”）。单击（函数（）{
$（“.face”）。每个（函数（）{
var playerName=$（this.attr（'playerName'）；
$（this）.text（playerName）；
});
});
$（“#pr”）。单击（函数（）{
$（“.face”）。每个（函数（）{
var playerRole=$（this.attr（'playerRole'）；
$（this）.text（playerRole）；
});
});

显示玩家名称
显示玩家角色
$（文档）.ready（函数（）{
$（“.face”）。每个（函数（）{
var rowNumber=$（this.attr（'rowNumber'）；
$（此）.text（行编号）；
});
});
$（“#pn”）。单击（函数（）{
$（“.face”）。每个（函数（）{
var playerName=$（this.attr（'playerName'）；
$（this）.text（playerName）；
});
});
$（“#pr”）。单击（函数（）{
$（“.face”）。每个（函数（）{
var playerRole=$（this.attr（'playerRole'）；
$（this）.text（playerRole）；
});
});

显示玩家名称
显示玩家角色
我建议您使用
数据-
属性

这里有一个例子：

我添加了一些按钮，将不同div
data-
属性的内容粘贴到节点本身

<div class="face" data-rownumber="1" data-rowposition="0" data-playername="Jo Smith" data-playerrole="Captain" data-playerposition="0" style=" width: 46.5668px; height: 46.5789px; color:  #000; background-color: rgb(255, 0, 0);">Test1</div>
<div class="face" data-rownumber="2" data-rowposition="0" data-playername="Mc Fitti" data-playerrole="Captain" data-playerposition="0" style="width: 46.5668px; height: 46.5789px; color: #000; background-color: rgb(255, 0, 0);">Test2</div>
<button class="js-number">Show Number</button>
<button class="js-name">Show Name</button>

我建议您使用
数据-
属性

这里有一个例子：

我添加了一些按钮，将不同div
data-
属性的内容粘贴到节点本身

<div class="face" data-rownumber="1" data-rowposition="0" data-playername="Jo Smith" data-playerrole="Captain" data-playerposition="0" style=" width: 46.5668px; height: 46.5789px; color:  #000; background-color: rgb(255, 0, 0);">Test1</div>
<div class="face" data-rownumber="2" data-rowposition="0" data-playername="Mc Fitti" data-playerrole="Captain" data-playerposition="0" style="width: 46.5668px; height: 46.5789px; color: #000; background-color: rgb(255, 0, 0);">Test2</div>
<button class="js-number">Show Number</button>
<button class="js-name">Show Name</button>

对。这是通过更改“selected”元素上的类来实现的，并使用CSS根据它是什么类来呈现不同的值


$（'.selector'）。单击（函数（）{
$（'#selected'）.attr（'class'，$（this.text（））；
});
.rownumber.face:after{content:attr（rownumber）；}
.playername.face:after{content:attr（playername）；}
.playerrole.face:after{content:attr（playerrole）；}

行数
玩家名称
playerrole
是。这是通过更改“selected”元素上的类来实现的，并使用CSS根据它是什么类来呈现不同的值


$（'.selector'）。单击（函数（）{
$（'#selected'）.attr（'class'，$（this.text（））；
});
.rownumber.face:after{content:attr（rownumber）；}
.playername.face:after{content:attr（playername）；}
.playerrole.face:after{content:attr（playerrole）；}

行数
玩家名称
playerrole
使用Vanilla JS：

与Rodrigo类似，我使用的是
数据-
属性：

<div
  class="face"
  data-rownumber="1"
  data-rowposition="0"
  data-playername="Jo Smith"
  data-playerrole="Captain"
  data-playerposition="0"
></div>

<button data-type="rownumber">Row</button>
<button data-type="playername">Name</button>
<button data-type="playerrole">Role</button>

在按钮上循环并向其添加事件侦听器：

[].slice.call(buttons).forEach(function (button) {
  button.addEventListener('click', show.bind(this, button.dataset.type), false);
});

函数在
面
集合中的元素上循环，并将作为
参数[0]
传递到函数中的
类型
分配给其
文本内容

function show() {
  for (var i = 0; i < face.length; i++) {
    face[i].textContent = face[i].dataset[arguments[0]];
  }
}

函数显示（）{
对于（变量i=0；i

使用香草JS：

与Rodrigo类似，我使用的是
数据-
属性：

<div
  class="face"
  data-rownumber="1"
  data-rowposition="0"
  data-playername="Jo Smith"
  data-playerrole="Captain"
  data-playerposition="0"
></div>

<button data-type="rownumber">Row</button>
<button data-type="playername">Name</button>
<button data-type="playerrole">Role</button>

在按钮上循环并向其添加事件侦听器：

[].slice.call(buttons).forEach(function (button) {
  button.addEventListener('click', show.bind(this, button.dataset.type), false);
});

函数在
面
集合中的元素上循环，并将作为
参数[0]
传递到函数中的
类型
分配给其
文本内容

function show() {
  for (var i = 0; i < face.length; i++) {
    face[i].textContent = face[i].dataset[arguments[0]];
  }
}

函数显示（）{
对于（变量i=0；i

感谢所有提交的资料。从你们每个人身上学到了很多。你们都太棒了。谢谢你们的意见书。从你们每个人身上学到了很多。你们都很棒。