Отображение пользовательского атрибута div с jquery и css

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> с с классом «лицом» отобразить «RowNumber» .... а затем после нажатия на кнопку, все они дисплей «PlayerName» .... а затем после нажатия на другой кнопке, все они отображения «playerrole»

Thankyou для чтения и, надеюсь, отвечая ....

Answer 1

Да. Это работает, изменяя класс на «выбранный» элемент и используя 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>

Answer 2

Использование JQuery и .attr(attributeName) функцию, чтобы получить значение атрибут и снова использовать jQuery для добавления этого текста (значения атрибута), где это необходимо.

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:

Similarl у Родриго Я использую 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'); 

Loop над кнопками и добавить обработчики событий к ним:

[].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