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>

与jquery和foreach的不同的图象复选框

1 个答案: