How to change text of each DIV class indivdually? - sql

Question

I am loading multiple DIV from Database
That my Javascript for click
<script type="text/javascript">
$(document).ready( function() {
var role = 0;
$(".role").click(function(){
if(role == 0)
{
role = 1;
$(".role").text("Decision Approver");
}
else if(role == 1)
{
role = 2;
$(".role").text("Decision Maker");
}
else if(role == 2)
{
role = 3;
$(".role").text("Influencer");
}
else if(role == 3)
{
role = 4;
$(".role").text("Gate Keeper");
}
else if(role == 4)
{
role = 5;
$(".role").text("User");
}
else if(role == 5)
{
role = 6;
$(".role").text("Stake-holder");
}
else if(role == 6)
{
role = 0;
$(".role").text("");
}
});
});
</script>
my CSS for the DIV "role"
{
position: absolute;
width: 50px;
min-height:20px;
height:auto;
border:1px solid #000;
word-wrap: break-word;
float:left;
font-size:12px;
z-index: 30;
margin-top:50px;
margin-left:3px;
}
This is the HTML
$qry = "SELECT * from contact";
$result = mysql_query($qry);
while ($row = mysql_fetch_array($result))
{
<div class="role" align="center" ></div>
}
Multiple DIV has been generated, when I click on one DIV role, all the DIV role change their text. How can I change each DIV individually and update them to database by contactID?

Answer 1

Assuming you want to use jQuery to do this client-side (and on this assumption I've no idea what the SQL is doing in either the tags or the question) I'd suggest using an array to contain the new text:
var textValues = ['Decision maker', 'Decision approver', 'influencer']; // and so forth
$('.role').text(function(i){
return textValues[i];
});
JS Fiddle demo.
The above will iterate over each of the .role elements, the i represents the index of the current element (amongst those other elements in the collection), and will set the text to that contained at the i position within the textValues array.
References:
text().

Answer 2

I think when you are updating the role, all conditions are met one after the other, so you need to include return false; that is similar to break;