javascript - 使用 jquery 和 css 显示一个 div 的自定义属性

Question

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

我有一系列 <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 中拥有所有 <div>具有“face”类的 s 显示“rownumber”......然后在单击一个按钮后，它们都显示“playername”......然后在单击不同的按钮后，它们都显示“playerrole”

感谢您阅读并希望能回答....

Answer 1

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

$('.selector').click(function(){
  $('#selected').attr('class',$(this).text());
});

.rownumber .face:after { content: attr(rownumber); }
.playername .face:after { content: attr(playername); }
.playerrole .face:after { content: attr(playerrole); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='selected' class='rownumber'>
<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>
 </div>
<button class='selector'>rownumber</button>
<button class='selector'>playername</button>
<button class='selector'>playerrole</button>

如果你想要一个全 css 的解决方案，你可以这样做:

[name=selected][value=rownumber]:checked ~ div .face:after {
  content: attr(rownumber);
}
[name=selected][value=playername]:checked ~ div .face:after {
  content: attr(playername);
}
[name=selected][value=playerrole]:checked ~ div .face:after {
  content: attr(playerrole);
}

<input type='radio' name='selected' value='rownumber'>Rownumber
<input type='radio' name='selected' value='playername'>Playername
<input type='radio' name='selected' value='playerrole'>Playerrole
<div>
  <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>
</div>