Estoy creando una especie de calculadora de genética de conejos que permite al usuario poner una cadena genética con opciones seleccionadas. Dependiendo de los genes seleccionados, mostrará una imagen de cómo debería verse el color. Los tres genes principales necesitan cambiar la imagen de color base y marcar imágenes según los genes seleccionados.
<div class="rabbit"> <img id="basecoat" src="img/base/chestnut.png" border="0"> <img id="tort" src="img/tort/tort.png" border="0"> </div> <select id="agouti"> <option value="chestnut" selected>chestnut</option> <option value="self">self</option> </select> <select id="extension"> <option value="black" selected>black</option> <option value="red">red</option> </select> <select id="color"> <option value="full" selected>full</option> <option value="chin">chinchilla</option> </select>Aquí están los combos y su efecto deseado:
"chestnut" + "black" + "full" = img/base/chestnut.png "chestnut" + "black" + "chin" = img/base/chinchilla.png "chestnut" + "red" + "full" = img/base/orange.png "chestnut" + "red" + "chin" = img/base/frosty.png "self" + "black" + "full" = img/base/black.png "self" + "black" + "chin" = img/base/black.png "self" + "red" + "full" = img/base/black.png + img/tort/tort.png "self" + "red" + "chin" = img/base/black.png + img/tort/sallander.pngDeberá preparar un archivo noimage.png para usarlo como marcador de posición en caso de error o cuando se supone que la segunda imagen no aparece.
Prueba este código.
var $tag = $("#agouti").val () + "_" + $("#extension").val () + "_" + $("#color").val (); var combos = {"chestnut_black_full":['img/base/chestnut.png', 'noimage.png'], "chestnut_black_chin":['img/base/chinchilla.png', 'noimage.png'], "chestnut_red_full":['img/base/orange.png', 'noimage.png'], "chestnut_red_chin":['img/base/frosty.png', 'noimage.png'], "self_black_full":['img/base/black.png', 'noimage.png'], "self_black_chin":['img/base/black.png', 'noimage.png'], "self_red_full":['img/base/black.png', 'img/tort/tort.png'], "self_red_chin":['img/base/black.png', 'img/tort/sallander.png']}; $(document).on ("change", "select", function () { if (combos[$tag]) { $("#basecoat").attr ("src", combos[$tag][0]); $("#tort").attr ("src", combos[$tag][1]); } else { $("$basecoat, $tort").attr ("src", "noimage.png"); } });