Question

 <script type="text/javascript">
 var prev = '';
 $('#zzz img').click(function(){
 if (prev != '')
  $('#img_' + prev).css('border', '1px solid #eee');

 prev = $(this).attr('id').replace('img_', '');

 $(this).css('border', '1px solid #535666');
 $('#imgid').val(prev);
});
 </script>

css:

ul#zzz {clear: both}
ul#zzz li {display: inline ; padding: 3px}
ul#zzz img {border: 1px solid #eee}

html:

<input type="text" id="imgid" name="imgid" value="">
<ul id="zzz">
<li><img name="1" id="img_1" src="img_1.png"></li>
<li><img name="2" id="img_2" src="img_2.png"></li>
<li><img name="3" id="img_3" src="img_3.png"></li>
</ul>

still cant understnd whats wrong. before everything was fine, nothing has changed. any ideas? thanks

Answer 1

put all in document ready handler and see if helps:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
 jQuery(function($){
    var prev = '';
    $('#zzz img').click(function(){
      if (prev != '')
       $('#img_' + prev).css('border', '1px solid #eee');

       prev = $(this).attr('id').replace('img_', '');

       $(this).css('border', '1px solid #535666');
       $('#imgid').val(prev);
    });
   });
</script>

Hoping that you are having jQuery plugin loaded before this script.