如何使用变量简化jquery代码？

我正试图找到一个使用变量或其他jQuery技术的解决方案，这将允许我完全缩短以下代码

例如，我如何将ptn_u设置为变量/常量，并让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>

非常感谢

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

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

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

您可以创建一个函数来处理您想要执行的操作。大概是这样的：

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

---

当您在编码时发现自己在重复一些东西，请停止并尝试找到一些可以封装在函数中的模式

您可以创建一个函数来处理您想要执行的操作。大概是这样的：

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

---

当您在编码时发现自己在重复一些东西，请停止并尝试找到一些可以封装在函数中的模式

一个简单的解决方案是

添加一个公共事件处理程序 使用id参数调用commonfunction setbackgroundgid 让setBackgroung根据传递的id计算映像名和div名

---

一个简单的解决方案是

添加一个公共事件处理程序 使用id参数调用commonfunction setbackgroundgid 让setBackgroung根据传递的id计算映像名和div名

---

您可以使用以下命令缩短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)');
});

---

单击按钮时，将创建变量“i”，并获取所单击按钮id的最后一个字符的值。

您可以使用以下命令缩短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)');
});

---

单击按钮时，将创建变量“i”，并获取所单击按钮id的最后一个字符的值。

谢谢您的回答！很好的解决方案，在配偶身上起到了作用。再次感谢你！谢谢你的回答！很好的解决方案，在配偶身上起到了作用。再次感谢你！