Javascript ID分组

时间:2014-12-14 18:16:57

标签: javascript php gallery grouping

我正在寻找创建一个异常,根据他们的.php ID号创建2个groupd。

我目前有一个填充图像表格的表单,并希望使用javascript将它们分组。

目前脚本如下所示:

var currentResults;

function init() {
getProducts();}

function getProducts() {
$.ajax({
    url:"php/products.php",
    dataType: "json",
    data: { public: true },
    success:function(result){
        processResults(result);
    }
});}

function processResults(results) {
currentResults = null;

if (!results && !results.products) 
    return; 

currentResults = results.products;

for (var i = 0; i < results.products.length; i++) {
    processResult(results.products[i]);}

$(".galleryitem").click(handleThumbnailClick);}

function processResult(result) {
    var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">';

    newDiv += '<div class="imageHover" style="background: ' + result.color + '">&nbsp;</div>';
    newDiv += '<img class="galleryImage" src="' + encodeImagePath(result.thumbnail) + '" />';

if (result.artist)
    newDiv +=   '<div class="imageArtist">' + result.artist + '</div>';

    newDiv += '</div>';

$('#gallery').append(newDiv);}

function handleThumbnailClick(e) {
    if (!e || !e.currentTarget || !e.currentTarget.id)
    return;

    var id = e.currentTarget.id.substring(11);

window.location = 'product.php?id=' + id;}

function encodeImagePath(path) {
return path.replace(/#/g, '%23');}

我正在寻找一些关于如何根据产品的ID编号将其拆分为多个div的简单建议,以便使用不同的标题文本一次完成6个图像的部分。

请指教!!非常感谢!

1 个答案:

答案 0 :(得分:0)

不确定我的想法是否正确但是这样的事情可以解决您的问题(如果您从服务器获得的产品JSON中有“父”属性):

function processResult(result) {
    if (typeof(result.parent) !== 'undefined') { // see if the element has a parent
        var newDiv = 'markup goes here'; // if some of the markup would be reused you can create a new function for this

        $('#galleryitem' + result.parent).append(newDiv); // just make sure the parent is already there
    } else {
        var newDiv = '<div id="galleryitem' + result.id + '" class="galleryitem">'; // default behavior that you alreay had

        // code skipped for brevity

        $('#gallery').append(newDiv);
    }
}

P.S。您应该处理代码格式化 - 如果格式化的话,它可以更容易阅读。