Question

我正在建立一个网站，让用户可以预览他们的选择（图片）。

现在看来，两个单独的功能都有效，但有点令人困惑，因为复选框做了一件事，但是他们必须单击图像才能更改预览。这是'代码：

$(".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中添加边框并更改图片？

更好的是，如果点击了瓷砖图像是否有办法检查框？

通过流行的domand（lol），我添加了som 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>

Answer 1

我会做这样的事情：

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

在Checkbox Jquery上更改图像

1 个答案: