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>的＆＃39; face＆＃39;显示＆＃34; rownumber＆＃34; ....然后点击一个按钮后，它们全部显示＆＃34; playername＆＃34; ....然后点击另一个按钮后，它们全部显示＆＃34; playerrole＆＃34;

谢谢你的阅读，希望能回答......

Answer 1

使用jQuery和.attr( attributeName)函数获取属性的值，然后再使用jQuery将该文本（属性值）添加到需要的位置。

Answer 2

是。这可以通过更改“已选择”的课程来实现。元素，并使用CSS根据它的类来呈现不同的值。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

＆＃13;

[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);
}

＆＃13;

<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>

＆＃13;

Answer 3

$(document).ready(function(){
  $(".face").each(function(){
    var rowNumber = $(this).attr('rownumber');
    $(this).text(rowNumber);
  });
});

$("#pn").click(function(){
  $(".face").each(function(){
    var playerName = $(this).attr('playername');
    $(this).text(playerName);
  });
});

$("#pr").click(function(){
  $(".face").each(function(){
    var playerRole = $(this).attr('playerrole');
    $(this).text(playerRole);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="face" rownumber="1" rowposition="0" playername="Jo Smith" playerrole="Captain" playerposition="0"></div>

<div class="face" rownumber="2" rowposition="0" playername="Rob krest" playerrole="Pirate" playerposition="0"></div>

<div class="face" rownumber="3" rowposition="0" playername="Alex Konst" playerrole="Cyborg" playerposition="0"></div>

<button id="pn">Show player Name</button>
<button id="pr">Show player Role</button>

Answer 4

我建议您使用data-属性。

这是一个例子： https://jsfiddle.net/z424eyq0/3/

我添加了一些按钮，将不同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>

还有一些js：

$('.js-number').click(function() {  
   $('.face').each(function() {  
      $(this).text($(this).data('rownumber'));   
   }); 
 })

$('.js-name').click(function() {    
   $('.face').each(function() {  
     $(this).text($(this).data('playername'));   
   });
})

Answer 5

使用Vanilla JS：

与罗德里戈类似，我正在使用data-属性：

<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>

抓住按钮和所有卡片

var buttons = document.querySelectorAll('button');
var face = document.querySelectorAll('.face');

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

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

该函数循环遍历face集合中的元素，并将type作为argument[0]传递给函数textContent。

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

DEMO

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

5 个答案: