javascript - Automatic input on click -
i tried make automatic input on click based on 2 pare of images. on left side have 2 images need connect 2 input fields, , on right side have 2 images letter should field in input. if click on image 1, input 1 field letter connect image on right side.
$('a').click(function(){ $('.inputs').val($(this).data('letter')); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question"> <div id="old" class="left_side one_half"> <a href="#" data-number="1"><img src="http://placehold.it/350x150"></a> <a href="#" data-number="2"><img src="http://placehold.it/350x150"></a> </div> <div class="left_side one_half"> <a href="#" data-letter="ei"><img data-letter="ei" src="http://placehold.it/350x150"></a> <a href="#" data-letter="al"><img data-letter="ei" src="http://placehold.it/350x150"></a> </div> </div> <div class="answer_1"> <input class="inputs letter square border_black" maxlength="1" type="text" /> <input class="inputs letter square border_black" maxlength="1" type="text" />with solution, can fill in al fields letters, , can not connect first field desired letter. hope explain right. thanks.
i guess understood want.
in below example see selected input ( depending on data-number of clicked #old a ) blue background. when clicking on second column of images ( data-letter ) , selected input ( blue background) value data-letter of clicked image
images old column faded opacity can see which.
let me know if looking for
var input = $(".inputs") $('#old a').click(function() { var nr = $(this).attr("data-number"), lettera = $(this).parent("#old").siblings(".left_side").find("a") $(".selected").removeclass("selected").val("") $(input).eq(nr - 1).addclass("selected") $(lettera).on("click", function() { var letter = $(this).attr("data-letter") $(".selected").val(letter) }); });.left_side { float: left; width: 50%; } .selected { background: blue; } input { color: red } #old img { opacity: 0.5 } img { max-width: 100%; height: auto; } { display: block }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="question"> <div id="old" class="left_side one_half"> <a href="#" data-number="1"><img src="http://placehold.it/350x150"></a> <a href="#" data-number="2"><img src="http://placehold.it/350x150"></a> </div> <div class="left_side one_half"> <a href="#" data-letter="ei"><img data-letter="ei" src="http://placehold.it/350x150"></a> <a href="#" data-letter="al"><img data-letter="ei" src="http://placehold.it/350x150"></a> </div> </div> <div class="answer_1"> <input class="inputs letter square border_black" maxlength="1" type="text" /> <input class="inputs letter square border_black" maxlength="1" type="text" />
Comments
Post a Comment