How do I style one element of a class by removing the style from the previous element of the same class?
To be more specific, I am trying to create a series of img slabs that will get a border when you select one of them. When another piece of image from the same class is selected, it will get a border, whereas the previously selected img will remove the border.
A good example would be similar to the first example on this website: http://rvera.github.io/image-picker/
IMPORTANT: I am trying to avoid jQuery and find a pure Javascript solution. Nothing against jQuery, I just want to avoid this project.
Here's my code ...
CSS
<style>
.tile {
width:100px;
height:100px;
cursor:pointer
}
</style>
JavaScript:
<script>
function example() {
var i; // Counter.
var tilecount = document.querySelectorAll('.tile').length; // Number of elements of the "tile" class.
var tilearray = document.getElementsByClassName("tile"); // All tile elements.
for(i = 0; i < tilecount; i++) {
if(tilearray[i].style.border == "none") {
tilearray[i].style.border = "5px solid #2c2d2d";
}
else {
tilearray[i].style.border = "none";
}
}
}
</script>
HTML:
<table>
<tr>
<td><img onclick="example()" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
<td><img onclick="example()" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
<td><img onclick="example()" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
</tr>
</table>
Unfortunately my code doesn't work and I thought I'd take the brains of the experts here on Stack Overflow. Again, not jQuery please.
source to share
Since there is no more than 1 item selected at all times, there is no need to iterate over all items.
You can simply store the last object that was clicked inside a public variable.
Then when you click on the new item, you already have a link to the item that was previously selected.
<table>
<tr>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
<td><img onclick="example(this)" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
</tr>
</table>
JS:
var lastSelectedItem;
function example(element) {
if(lastSelectedItem)
lastSelectedItem.style.border = "none";
element.style.border = "1px solid black";
lastSelectedItem = element;
}
source to share
You can simply add a link this
when you call the function and in your function loop through the elements, remove their borders and add a border to the one that is clicked.
function example(el) {
var tilearray = document.getElementsByClassName("tile"); // All tile elements.
for(i = 0; i < tilearray.length; i++) {
tilearray[i].style.border = '';
}
el.style.border = "5px solid #2c2d2d"
}
.tile {
width: 100px;
height: 100px;
cursor: pointer
}
<table>
<tr>
<td>
<img onclick="example(this)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" />
</td>
<td>
<img onclick="example(this)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" />
</td>
<td>
<img onclick="example(this)" class="tile" src="http://i.imgur.com/76hOij3.png" />
</td>
</tr>
</table>
source to share
Divide the variable into a function, then use it to select an item.
Note that the buttons call the function with the "select" variable, which is used to select the correct item.
Also, you don't need to declare the variable i before the for loop, which is for i = 0 inside the loop.
<table>
<tr>
<td><img onclick="example(0)" class="tile" src="http://i.imgur.com/jlQyrWk.jpg" /></td>
<td><img onclick="example(1)" class="tile" src="http://i.imgur.com/H6qGF5Z.jpg" /></td>
<td><img onclick="example(2)" class="tile" src="http://i.imgur.com/76hOij3.png" /></td>
</tr>
</table>
function example(select) {
var tilecount = document.querySelectorAll('.tile').length; // Number of elements of the "tile" class.
var tilearray = document.getElementsByClassName("tile"); // All tile elements.
for(i = 0; i < tilecount; i++) {
tilearray[i].style.border = "none";
}
tilearray[select].style.border = "5px solid #2c2d2d";
}
source to share