如何使用变量来简写这个 jquery 代码？

Question

我正在尝试使用变量或其他一些 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 Button，点击后会根据 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)} 

非常感谢。

Answer 1

你可以用这个来缩短 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 的最后一个字符的值。

Answer 2

一个简单的解决方案将是

• 添加通用事件处理程序
• 使用 id 参数调用普通函数setBackgroung(id)
• 让setBackgroung根据传递的id计算图像名称和div名称

Answer 3

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

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);
});

在编写代码时发现自己在重复一些东西，停下来试着找出一些可以封装在函数中的模式。

Answer 4

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 函数。