My goal is to have a series of 4 images that you can click, a drop-down menu appears, and a new selection can be made. The new selection should change the image to one that corresponds with the selection. Here is what I have so far.
<div class="container">
<div class="row">
<h2>Test v0.1</h2>
<p>Click to see the available options</p>
<div class="col-md-3">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img id="Cube1" src="img/Configs/Cube01Config01.png">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img id="Cube2" src="img/Configs/Cube01Config01.png">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img id="Cube3" src="img/Configs/Cube01Config01.png">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<a href="#" id="imageDropdown" data-toggle="dropdown">
<img id="Cube4" src="img/Configs/Cube01Config01.png">
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="imageDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cube 3</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Default Cube</a></li>
</ul>
</div>
</div>
</div>
And here is what I am using to listen to and switch between the images, and after tinkering too much it's not working anymore in it's current state.
$(document).ready(function() {
// Listen for changes in the dropdown menus
$('.dropdown-menu a').click(function() {
// Get the text of the selected dropdown menu item
var cubeName = $(this).text();
// Update the image based on the selected dropdown menu item
if (cubeName == 'Cube 1') {
$('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
} else if (cubeName == 'Cube 2') {
$('#cube1').attr('src', 'img/Configs/Cube02Config01.png');
} else if (cubeName == 'Cube 3') {
$('#cube1').attr('src', 'img/Configs/Cube03Config01.png');
} else if (cubeName == 'Default Cube') {
$('#cube1').attr('src', 'img/Configs/Cube01Config01.png');
}
});
});
Any help, alternative methods, or pointing in the right direction would be extremely helpful!
You're using lowercase to select
#cube1
in theif
statement, change it to#Cube1
and it should work again.