Изменить изображение на флажке Jquery

Я создаю сайт, который предоставит пользователям предварительный просмотр их выбора (изображения).

В настоящее время обе отдельные функции работают, но это немного сбивает с толку, потому что флажок делает одну вещь, но им нужно щелкнуть изображение, чтобы изменить предварительный просмотр. Вот код:

$(".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'));
                });

Я хочу, чтобы изображение предварительного просмотра (#preview_image) менялось при изменении флажка (.checkbox_collar)

Вот мое предпринятое решение, которое не сработало (чтобы лучше понять, что я пытаюсь сделать:

$(".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')); 
                });

Вышеупомянутое не сработало ... есть ли способ связать их вместе? Так что, когда пользователь щелкает... он добавляет рамку и меняет картинку в $preview_image?

Еще лучше, есть ли способ установить флажок для изображения плитки при нажатии?

По популярному запросу (смеется) я добавил немного 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>

Update here is an update to my code that gets the box to wokr but won't check the check box:

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

image checkbox jquery selected
person paulcruse3    schedule 30.04.2013    source источник
comment
Опубликуйте свой HTML-код или, что еще лучше, разместите его на jsfiddle.net.   -  person griegs    schedule 01.05.2013

Ответы (1)


arrow_upward
0
arrow_downward

Я бы сделал что-то вроде этого:

$(".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/

Я почистил вашу реализацию. Кажется, это работает, но вам может понадобиться возиться с методом замены. Кроме того, я удалил ваши странные селекторы, вы можете попробовать вернуть их. Вероятно, вам следует разбить это на отдельные части. Событие 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>
person 4m1r    schedule 01.05.2013