Question

在我的网站项目中，我希望用户能够更改他们的个人资料的横幅图片。到目前为止，我可以让他们上传一个图像，并自动将其作为背景应用于标题，我还有3个无线电输入，让他们重复-x，重复-y和不重复横幅。

我的下一步是弄清楚如何让他们选择图像的位置。

我不想抛出10个单选按钮给它们预定义的选择，因为它看起来很难看。我尝试采用复选框方法，让它们选择“Top”，然后第二个位置说“LEFT”，以便适用于.css({'backgroundPosition' : 'top left'});

这个问题是我有两个以上的复选框，所以它会弄乱jquery的逻辑。

有人能就我如何解决这个问题给我一些想法吗？

最后，我正在计划放弃并给他们一个带有“热点”的样本矩形，然后让他们选择他们希望图像沿着两个输入的位置，以获得左上角定位的数值（即10px 200px）

是否有一种优雅的眼睛方式来接近这个？

我当前处理单选按钮的代码点击

$("form#frm_look_and_feel input[name='position']").each(function(){
        $(this).bind('change', function(){
            var position = $(this).val();
            $('#topHeader').css({'backgroundPosition' : position});
        });
    });

Answer 1

再给他们2个单选按钮集：

一个适用于top或bottom

一个用于left或right

<form id="form">
  <input type="radio" name="topOrBottom" value="top" />Top
  <input type="radio" name="topOrBottom" value="bottom" />Bottom


  <input type="radio" name="leftOrRight" value="left" />Left
  <input type="radio" name="leftOrRight" value="right" />Right
</form>

然后你的jQuery看起来如下：

$('#form').submit(function() {
    var tb = $('input[name="topOrBottom"]:checked').val(),
        lr = $('input[name="leftOrRight"]:checked').val();
    $('.whatever').css({'backgroundPosition' : tb + ' ' + lr});
});

使用查询更改背景位置

1 个答案: