0

ユーザーが選択したもの (画像) のプレビューを提供するサイトを構築しています。

現在のところ、個々の機能は両方とも機能しますが、チェックボックスが 1 つのことを行うため、少し混乱しますが、プレビューを変更するには画像をクリックする必要があります。コードは次のとおりです。

$(".checkbox_collar").change(function(){                        
                    $('.tile_collar').css('border', 'none');
                    $(this).closest('td').find('.tile_collar').css('border', "solid 1px #FC810A"); 
                });
                $('.optionsTable').delegate('img','click', function(){
                    $('#preview_image').attr('src',$(this).attr('src').replace('tile','preview'));
                });

チェックボックスの変更（.checkbox_collar）でプレビュー画像（#preview_image）を変更したい

これが私の試みた解決策ですが、うまくいきませんでした（私がやろうとしていることをよりよく理解するために：

$(".checkbox_<?=$tabOption?>").change(function(){                       
                    $('.tile_collar').css('border', 'none');
                    $(this).closest('td').find('.tile_collar').css('border', "solid 1px #FC810A");
                    $('#preview_image').attr('src',$(this).attr('src').replace('tile','preview')); 
                });

上記はうまくいきませんでした... 2つを結びつける方法はありますか? ユーザーがクリックすると...境界線が追加され、$preview_image の pic が変更されますか?

さらに良いことに、クリックした場合にタイル画像のチェックボックスをオンにする方法はありますか?

人気ドマンド（笑）で、HTMLを少し追加しました。ご不便をかけて申し訳ありません：

<table class="optionsTable" id="optionsTable">
                            <tr>
                                <td><img src="img/option/tile/test.png" width="100px" class="tile_test" style="border: solid 1px #FC810A">
                                    <br>
                                    <input class="checkbox" id="optionRadio" type="radio" name="test" value="1" checked="checked">
                                </td>

                            </tr>
                            </table>  
                    </div><!--option div-->
                    <div id="option_preview">

                        <img src="img/option/preview/test.png" width="335px" alt="test">
                        <div id="option_desc" class="option_desc">Edit</div>

ここでの更新は、ボックスを wokr に取得するがチェックボックスをオンにしないコードの更新です。

<script type="text/javascript">
                            $('#optionsTable_<?=$tabOption?>').delegate('img','click', function(){
                                $('.tile_<?=$tabOption?>').css('border', 'none');
                                $(this).closest('td').find('.tile_<?=$tabOption?>').css('border', "solid 1px #FC810A");
                                $('#preview_<?=$optionSku?>').attr('src',$(this).attr('src').replace('tile','preview')); 
                           });
                        </script>
4

1 に答える 1

0

私はこのようなことをします：

$(".checkbox_collar").on('change', function(){
   var newSrc = $(this).attr('src').replace('tile','preview');
   $('#preview_image').attr('src', newSrc);

   $(this).next('td').find('.tile_collar').css('border', '1px solid red');
});

ただし、この例では HTML を表示する必要があります。

わかりました、私はあなたがやろうとしていることを理解していると思います。このフィドルをチェックしてください。

http://jsfiddle.net/kDeFQ/

実装をクリーンアップしました。これは機能しているように見えますが、replace メソッドをいじる必要があるかもしれません。また、ファンキーなセレクターを削除しました。元に戻してみてください。おそらく、これを個別のパーツに分解する必要があります。onChange イベントは独自のメソッドを呼び出す必要があります。幸運を！

<div>
    <table class="optionsTable" id="optionsTable">
        <tr>
            <td>
                <img src="/img/oneimage.gif" width="100px" class="tile_test" style="border: solid 1px #FC810A">
                <input class="checkbox" id="optionRadio" type="checkbox" name="test" value="1">
            </td>
        </tr>
    </table>
</div><!--option div-->

<div id="option_preview">
    <img src="/img/otherimage.png" width="335px" alt="test">
    <div id="option_desc" class="option_desc">Edit</div>
</div>


<script>
    $('#optionsTable input.checkbox').on('change', function(){
        var name = $(this).attr('name');
        $('.tile_'+ name ).css('border', 'none');
        $(this).prev('td').find('.tile_' + name).css('border', "solid 1px #FC810A");

        //now get src
        var source = $(this).prev('img').attr('src');
            source = source.replace('title', 'preview');
        console.log(source);
        $('#option_preview img').attr('src', source);
    });
</script>
于 2013-05-01T00:05:04.617 に答える