Help with ui selectable.
Help with ui selectable.
Hello,
First let me say thank you in advance for your help. I am new to using jquery as I am a PHP programmer by trade and I am still trying to get past the learning curve. Any help making this better would be greatly appreciated.
What I am doing is this, I have a list of images when clicked or selected I want to update a input with the alt tag of the image. So far I have this but as you can see the code is redundant and I think it can be made more efficient.
How it works:
Select Image 1 update input with alt from image 1
Select image 2 update input with alt from image 2 deselect current selected image.
Here is the code I have (works but seems bloated to me):
$("#selectable").selectable(
{
selected: PrintMessage
})
.bind("selected", PrintMessage);
$("#select").click(function() {
$("#selectable img").addClass("");
$("#selectable").trigger("selected");
});
function PrintMessage() {
$('#btn1').bind('click', function() {
$('#vehicletype').val($('#btn1').attr('alt'));
$('img#btn1').attr("class", "selected");
$('img#btn2').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn2').bind('click', function() {
$('#vehicletype').val($('#btn2').attr('alt'));
$('img#btn2').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn3').bind('click', function() {
$('#vehicletype').val($('#btn3').attr('alt'));
$('img#btn3').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn4').bind('click', function() {
$('#vehicletype').val($('#btn4').attr('alt'));
$('img#btn4').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn5').bind('click', function() {
$('#vehicletype').val($('#btn5').attr('alt'));
$('img#btn5').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn6').bind('click', function() {
$('#vehicletype').val($('#btn6').attr('alt'));
$('img#btn6').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn7').bind('click', function() {
$('#vehicletype').val($('#btn7').attr('alt'));
$('img#btn7').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn8').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn8').bind('click', function() {
$('#vehicletype').val($('#btn8').attr('alt'));
$('img#btn8').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn9').attr("class", "");
});
$('#btn9').bind('click', function() {
$('#vehicletype').val($('#btn9').attr('alt'));
$('img#btn9').attr("class", "selected");
$('img#btn1').attr("class", "");
$('img#btn2').attr("class", "");
$('img#btn4').attr("class", "");
$('img#btn3').attr("class", "");
$('img#btn5').attr("class", "");
$('img#btn6').attr("class", "");
$('img#btn7').attr("class", "");
$('img#btn8').attr("class", "");
});
}
<style type="text/css">
#selectable { font-size: 1.4em;}
#selectable img.selecting { background: #FECA40; }
#selectable img.selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable img { margin: 3px; padding: 0.4em; font-size: 1.4em; }
</style>
<input type="text" id="vehicletype" value="" />
<div id="selectable">
<img src="<?php echo base_url();?>assets/cp/img/caricons/passengercar.png" id="btn1" alt="1" class="" title="Passenger Car" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/sportscar.png" id="btn2" alt="2" class="" title="Sports Car" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/suv.png" id="btn3" alt="3" class="" title="SUV" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/hybrid.png" id="btn4" alt="4" class="" title="Green Cars / Hybrid" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/minivans.png" id="btn5" alt="5" class="" title="Minivans" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/pickuptruck.png" id="btn6" alt="6" class="" title="Pickup Truck" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/luxurycar.png" id="btn7" alt="7" class="" title="Luxury Car" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/crossover.png" id="btn8" alt="8" class="" title="Crossover" />
<img src="<?php echo base_url();?>assets/cp/img/caricons/convertible.png" id="btn9" alt="9" class="" title="Convertible" />
</div>
Any help in making this more efficient would be greatly appreciated.
Regards,
Ray