0

jqueryで画像の上にマウスを置く機能と画像をチェックする機能の両方を備えたチェックボックスフォームを作成したいと思います。関数は正常に作成されましたが、正しく機能しませんでした。

これがforeachを使用した私のhtmlフォームです。各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に一意のインデックス番号を送信する必要があります。

提案をいただけますか？

4

1 に答える 1

0

値フィールドからインデックスを取得して、これを試しましたか

<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>
于 2012-04-16T10:10:38.307 に答える