0

我正在尝试使用变量或其他一些 jQuery 技术找到一个解决方案，这将使我能够完全缩短以下代码。

例如，我如何能够将“ptn_”设置为变量/常量并让 jquery 选择数字？

或者，从长远来看，我是否可以只使用几个简单的变量来使事情变得更整洁、更容易？

假设我想添加更多项目，我是否可以简单地添加 HTML 代码，让 jQuery 代码从 CSS 中提取图像并在单击特定 ID 时显示它？

我有点困惑如何解决这个问题，是的，谷歌是你的朋友，不，我在任何地方都没有找到真正的解决方案：P 我希望有人能阐明如何改变这一点。我不指望为我做的工作，只是某种形式的解决方案。

凌乱的jQuery：

.four

是容器

.headercolor

是容器内的标题颜色类。

.patternwrap

单击#ptn_X ID 时将显示模式的主体包裹的div。

这是将更改包含 div 的整个容器的函数。

 $(function(){  
$('.button-preview').on('click', function() {
    $('.mainbody').css('background', 'rgba(0,0,0,0.4)');
    $('.four, .headercolor').css('color', '#fff');
})

以下是模式。

$('#ptn_1').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00001.png)');
})
$('#ptn_2').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00002.png)');
})
$('#ptn_3').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00003.png)');
})
$('#ptn_4').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_00004.png)');
})
});

单击时的 HTML 按钮将根据 ID 显示 jquery 选择器：

<div class="button-preview" id="ptn_1">Preview</div>
<!-- Div container displaying the pattern PREVIEW -->
<div class="pattern" id="ptn_00001"></div>

CSS：

#ptn_00001 {background:url(../images/cfpatterns/ptn_00001.png)}
#ptn_00002 {background:url(../images/cfpatterns/ptn_00002.png)}
#ptn_00003 {background:url(../images/cfpatterns/ptn_00003.png)}
#ptn_00004 {background:url(../images/cfpatterns/ptn_00004.png)}

非常感谢。

4

4 回答 4

2

您可以使用以下方法缩短 jquery 代码：

$('#ptn_1, #ptn_2, #ptn_3, #ptn_4').on('click', function() {
    var i = this.id.substr(-1);
    $('.patternwrap').css('background-image', 'url(images/img/ptn_0000'+ i +'.png)');
});

当您单击按钮时，将创建 var 'i' 并获取单击按钮 id 的最后一个字符的值。

于 2012-12-13T14:05:47.327 回答
1 
var i = 0;
$('#ptn_1, #ptn_2, #ptn_3, #ptn_4').on('click', function() {
    $('.patternwrap').css('background-image', 'url(images/img/ptn_0000' + (i++) + '.png)');
});

或者如果上述方法不起作用：

for (var i = 1; i < 5; i++) {
    $('#ptn_' + i).on('click', function() {
        $('.patternwrap').css('background-image', 'url(images/img/ptn_0000' + i+ '.png)');
    });

};

我会这样做的另一种方法是使用类而不是 ID 并使用该.each函数。

于 2012-12-13T13:41:12.497 回答
1

您可以只创建一个处理您想要执行的操作的函数。像这样的东西：

function change_image(id){
  $('.' + id).css('background-image', 'url(images/img/'+ id +'.png)');
}

至于点击处理程序。您可以拥有一个容器，然后从该容器中选择子项：

$('#container div').on('click', function(){
   var id = $(this).attr('id');
   change_image(id);
});

当你在编码并且你发现自己在重复一些东西时，停下来试着找到一些你可以封装在一个函数中的模式。

于 2012-12-13T13:42:41.350 回答
0

一个简单的解决方案将是

  • 添加通用事件处理程序
  • 调用setBackgroung(id)带有 id 参数的通用函数
  • 让从传递的 idsetBackgroung计算 图像名称和div 名称
于 2012-12-13T13:45:20.827 回答