如何使用变量缩写这个jQuery代码？

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

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

或者，我可以使用一些简单的变量来使事情更加整洁和容易吗？

说如果我想添加更多的项目，我只需要添加HTML代码，并让jQuery代码从CSS中提取图片并在点击特定ID时显示它？

我有点困惑如何去解决这个问题，是的，Google是你的朋友，不，我没有找到一个真正的解决方案：P我希望有人可以阐明如何改变这一点。我不期望这项工作为我做什么，只是某种形式的解决方案。

的凌乱的jQuery：

.four

是对容器

.headercolor

在容器内的报头的颜色类。

.patternwrap

身体包裹的div是否会在点击#ptn_X ID时显示图案。

这是将改变容纳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)}

非常感谢。

来源

2012-12-13 user1470037

你可以短恩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“我”是创建并采取点击的按钮的ID的最后卡拉科特的价值。

来源

2012-12-13 14:05:47 lithium

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-13 13:41:12 flavian

感谢您的回答！伟大的解决方案，现场配合。再次感谢一堆！ – user1470037

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

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-13 13:42:41

一个简单的解决方案将是

添加一个公共事件处理
呼叫commonfunction setBackgroung(id)与ID参数
让setBackgroung从计算图像名称和div名称编号通过

来源

2012-12-13 13:45:20 Champ

如何使用变量缩写这个jQuery代码？

回答

相关问题