Using jQuery and CSS to showcase a unique attribute of a div element

Question

Using jQuery and CSS to showcase a unique attribute of a div element

I am an amateur coder with a question that has been puzzling me for some time now. I have a feeling it should be simple, but I just can't seem to figure it out on my own. Maybe I haven't been looking in the right places... I hope you can provide some assistance.

On a page, I have a series of <div> elements with various custom attributes. Here is an example:

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

How can I use CSS to display the "rownumber" attribute for all <div> elements with the class 'face' initially.... and then change it to display "playername" for all elements after clicking on one button.... and finally, display "playerrole" after clicking on another button?

Thank you for taking the time to read this. I look forward to your response.

javascript jquery html css

Answer 1

Answer №1

Sure thing! The functionality is achieved by adjusting the class on the 'selected' element and using CSS to display different values depending on the class.

$('.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>

An alternative pure CSS solution would look like this:

[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

Sure thing! The functionality is achieved by adjusting the class on the 'selected' element and using CSS to display different values depending on the class.

$('.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>

An alternative pure CSS solution would look like this:

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

Answer №2

Implementing jQuery and utilizing the .attr( attributeName) method to extract attribute values, then employing jQuery once more to seamlessly insert that text (the extracted attribute value) where required.

Answer 4

Implementing jQuery and utilizing the .attr( attributeName) method to extract attribute values, then employing jQuery once more to seamlessly insert that text (the extracted attribute value) where required.

Answer 5

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">Display Player Name</button>
<button id="pr">Show Player Role</button>

Answer 6

$(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">Display Player Name</button>
<button id="pr">Show Player Role</button>

Answer 7

Answer №4

One idea to consider is utilizing the data- attributes for your work.

Take a look at this demonstration: https://jsfiddle.net/1fbLm2sg/

I've included some buttons that will insert the values of the various div data- attributes into the node itself.

<div class="person" data-id="1" data-name="John Doe" data-role="Manager" style=" width: 50px; height: 50px; color: #FFF; background-color: rgb(0, 128, 255);">Person 1</div>
<div class="person" data-id="2" data-name="Jane Smith" data-role="CEO" style="width: 60px; height: 60px; color: #000; background-color: rgb(255, 0, 0);">Person 2</div>
<button class="get-id">Show ID</button>
<button class="get-name">Show Name</button>

Here's the corresponding JavaScript code:

$('.get-id').click(function() {  
   $('.person').each(function() {  
      $(this).text($(this).data('id'));   
   }); 
 })

$('.get-name').click(function() {    
   $('.person').each(function() {  
     $(this).text($(this).data('name'));   
   });
})

Answer 8

One idea to consider is utilizing the data- attributes for your work.

Take a look at this demonstration: https://jsfiddle.net/1fbLm2sg/

I've included some buttons that will insert the values of the various div data- attributes into the node itself.

<div class="person" data-id="1" data-name="John Doe" data-role="Manager" style=" width: 50px; height: 50px; color: #FFF; background-color: rgb(0, 128, 255);">Person 1</div>
<div class="person" data-id="2" data-name="Jane Smith" data-role="CEO" style="width: 60px; height: 60px; color: #000; background-color: rgb(255, 0, 0);">Person 2</div>
<button class="get-id">Show ID</button>
<button class="get-name">Show Name</button>

Here's the corresponding JavaScript code:

$('.get-id').click(function() {  
   $('.person').each(function() {  
      $(this).text($(this).data('id'));   
   }); 
 })

$('.get-name').click(function() {    
   $('.person').each(function() {  
     $(this).text($(this).data('name'));   
   });
})

Answer 9

Answer №5

In my approach using Plain JavaScript:

Just like how Ilya utilized data- attributes, I also make use of them:

<div
  class="card"
  data-cardnumber="2"
  data-cardtype="Diamonds"
  data-cardowner="Alice"
></div>

<button data-type="cardnumber">Number</button>
<button data-type="cardowner">Owner</button>

Select all buttons and card elements:

var buttons = document.querySelectorAll('button');
var cards = document.querySelectorAll('.card');

Loop through the buttons and attach event listeners to them:

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

The function iterates over the cards in the collection and assigns the specified type passed into the function as argument[0] to their textContent.

function display() {
  for (var j = 0; j < cards.length; j++) {
    cards[j].textContent = cards[j].dataset[arguments[0]];
  }
}

DEMO

Answer 10

In my approach using Plain JavaScript:

Just like how Ilya utilized data- attributes, I also make use of them:

<div
  class="card"
  data-cardnumber="2"
  data-cardtype="Diamonds"
  data-cardowner="Alice"
></div>

<button data-type="cardnumber">Number</button>
<button data-type="cardowner">Owner</button>

Select all buttons and card elements:

var buttons = document.querySelectorAll('button');
var cards = document.querySelectorAll('.card');

Loop through the buttons and attach event listeners to them:

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

The function iterates over the cards in the collection and assigns the specified type passed into the function as argument[0] to their textContent.

function display() {
  for (var j = 0; j < cards.length; j++) {
    cards[j].textContent = cards[j].dataset[arguments[0]];
  }
}

DEMO

Using jQuery and CSS to showcase a unique attribute of a div element

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Utilize ajax requests to dynamically enable or disable input fields

How can I manually include a triangle in BufferGeometry using Three.js?

What is the best way to transform a Ruby hash into a JavaScript object while maintaining unquoted values?

Why does the jQuery alert trigger only 40% of the time?

Online support chat powered by jQuery AJAX

Creating hyperlinks in JSON response from a REST API with AngularJS - A guide!

How can you stop queuing animations and timeouts in jQuery?

What could be causing the failure of this web component using shadow DOM when the HTML code includes multiple instances of the component?

Issue NG0203 encountered during material import attempt

Even though I am utilizing the `.then()` method, my asynchronous function continues to return a status of

Bootstrap Table with Numerous Rows and Columns

Sending arrays' values in JavaScript

Mongoose Wraps Every Item Inside a Collection

Automatically Importing in VSCode - A Guide to Enabling Full Path Imports for Material-UI

Stopping an ajax timer when the results contain a specific key

a way to globally access the value of useEffect beyond its scope

Solving issues with event handling through addEventListener within a functional component in React

Differentiating row colors in an HTML table using ng-repeat

The loading on the Express endpoint does not cease, despite configuring the response status (Encountering problems with Multer and Express)

Cakephp routing issue preventing jQuery autocomplete from displaying values