jqueryとcssを使ってdivのカスタム属性を表示する

Question

私は趣味のコーダーで、私はちょうどそのことができないという質問をしています。私はそれが非常に簡単だと思うだろうが、おそらく私は正しい構文を探していないだろう...うまくいけば、あなたは私を助けることができる。

多くのカスタム属性を持つページには、一連の<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> 

どのようにCSSで、私は「顔」「ROWNUMBER」を表示するクラスを持つすべての<div> Sを持つことができます....し、その後、彼らはすべての表示]ボタンをクリックした後「プレイヤー名」......と、その後の値を取得するために別のボタンの上に、それらはすべて表示「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ソリューションが必要な場合は、これを行うことができます：

Similarl：バニラJSを使用して

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

Iは、ノード自体に異なる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

をロドリゴにY私は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コレクション内の要素をループし、をargument[0]という関数に渡してに割り当てます。すべての提出のための

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

DEMO