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按钮时，将根据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

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

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

一个简单的解决方案

添加公共事件处理程序
使用id参数

setBackgroung(id)

让setBackgroung从传递的ID中计算图片名称和 div名称

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

4 个答案: