jqueryとforeachの異なる画像チェックボックス

Question

jqueryを使ってマウスオーバー画像とチェック画像機能の両方を持つチェックボックスフォームを作りたいと思います。私は正常に機能しましたが、正しく機能しませんでした。

ここで私のHTMLフォームは、foreachを使用しています。各部門の異なる画像を表示します。ここで

 <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のスクリプトです：

<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> 

私は一意のインデックス番号からの番号に基づいてそれらをロードするために異なる画像を作りました。私は、簡単に読み込むための数字を含むさまざまな画像ファイルを保存しました。

問題は、ユーザーがマウスを画像の上に置いたときに画像を自動的に右の画像に変更することができないということです。

したがって、ユーザーが各画像にマウスを置くと、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>