如何使用變量縮寫這個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代碼？

回答

相關問題