jquery와 foreach가있는 다른 이미지 체크 박스

Question

jquery로 이미지 위에 마우스와 체크 된 이미지 기능이 모두있는 체크 박스 폼을 만들고 싶습니다. 나는 성공적으로 함수를 만들었지 만 제대로 작동하지 않았다.

여기 내 HTML 양식이며 foreach를 사용합니다. 그것은 각 divs에 다른 이미지를 보여줍니다.

<script> 
$(document).ready(function() { 

    var idx = idx 

    $('.imag_box'+idx+' img').hover(
     function() { 
      if($(this).next().val() !== "1") { 
       $(this).attr('src', '/images/account/ws_'+idx+'_hover.png'); 
      } 
      }, 
     function() { 
      if($(this).next().val() !== "1") { 
       $(this).attr('src', '/images/account/ws_'+idx+'.png'); 
      } 
     } 
    ); 


    $(".imag_box"+idx+" img").click(function() { 
     if($(this).next().val() !== "1") { 
      $(this).attr("src", "/images/account/ws_"+idx+"_checked.png"); 
      $(this).next().val("1"); 
     } else { 
      $(this).attr("src", "/images/account/ws_"+idx+".png"); 
      $(this).next().val("0"); 
     } 
    }); 
}); 
</script> 

내가 고유 인덱스 번호와 번호를 기반으로 그들을로드 다른 이미지를 만든 : 여기

 <form name='frm_edit_interest' action='/home/edit_interest' method='POST'> 
      <? 
       if(count($list) <= 0): 
        echo 'error'; 
       else: 
        $i = 0; 
        foreach($list as $row): 
         ++$i; 
      ?> 
       <div class='w_select_td'> 
        <div class='w_select_title_div'> 
         <span class='w_select_title_text'><?=$row['i_keyword']?></span> 
        </div> 
        <div class='w_select_img_div'> 
         <label for="w_interest" class="imag_box_<?=$row['i_idx']?>"> 
          <img src="/images/account/ws_<?=$row['i_idx']?>.png"/ style='cursor:pointer;border:solid 1px #eee;'> 
          <input name="chk[]" value='<?=$row['i_idx']?>' type="checkbox" style="display:none"> 
         </label> 
        </div> 
       </div> 
      <? 
        endforeach; 
       endif; 
      ?> 

      </div> 
      </div> 

      <div id='w_next_btn_div'> 
       <input id='btn_login' name='btn_login' type='submit' class='button' value='submit' /> 
      </div> 
     </form> 

은 JQuery와 스크립트입니다. 쉽게로드 할 수있는 숫자를 포함하는 다른 이미지 파일을 저장했습니다.

문제는 사용자가 마우스를 이미지 위로 올리면 이미지가 자동으로 오른쪽 이미지로 변경된다는 것입니다.

그래서 사용자가 각 이미지 위에 마우스를 올려 놓으면 jquery에 고유 한 색인 번호를 보내야합니다.

의견을 보내 주시겠습니까?

Answer 1

당신은 값 필드에서 인덱스를 받고,이 시도

<script> 
$(document).ready(function() { 



    $('.imag_box img').hover(
     function() { 
      if($(this).next().val() !== "1") { 
       $(this).attr('src', '/images/account/ws_'+ $(this).val() +'_hover.png'); 
      } 
      }, 
     function() { 
      if($(this).next().val() !== "1") { 
       $(this).attr('src', '/images/account/ws_'+ $(this).val() +'.png'); 
      } 
     } 
    ); 


    $(".imag_box img").click(function() { 
     if($(this).next().val() !== "1") { 
      $(this).attr("src", "/images/account/ws_"+ $(this).val() +"_checked.png"); 
      $(this).next().val("1"); 
     } else { 
      $(this).attr("src", "/images/account/ws_"+ $(this).val() +".png"); 
      $(this).next().val("0"); 
     } 
    }); 
}); 
</script>