不同的圖像複選框與jQuery和foreach

Question

我想做一個複選框的形式，既鼠標懸停的圖像和檢查圖像功能與jQuery。我成功地做了這個功能，但沒有正常工作。

這是我的html表單，使用foreach。它在每個div上顯示不同的圖像。

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