0

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

就目前而言，这两个单独的功能都可以工作，但有点令人困惑，因为复选框只做一件事，但他们必须单击图像才能更改预览。这里的代码：

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

以上没有工作......有什么办法可以将两者联系在一起？这样当用户单击时...它会添加边框并更改 $preview_image 中的图片？

更好的是，如果单击，有没有办法让平铺图像选中该框？

通过流行的领域（大声笑），我添加了 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>
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/

我已经清理了你的实现。这似乎可行，但您可能需要弄乱替换方法。另外，我已经删除了你的时髦选择器，你可以试着把它们放回去。您可能应该将其分解为离散的部分。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 回答