javascript - jquery - 具有多个元素的可变选项的 html()？

Question

我不太确定我这样做是否正确，因为我不是 jquery 专家。但事实是:我需要我的 kontinent[i].content 中的所有 #box 作为 html 代码应用到 #content div 中的先前 html。起初这似乎工作得很好，但当我仔细观察时，只有第一个元素(例如 europe.content 中的“#box1”被附加，我不明白为什么。

我是否必须循环遍历 kontinent[i].content 选择的元素？

这是我的代码:

    $(document).ready( function() {
    var europa = {
        content: $( '#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37' ),
        name: "europa"
        };
    var usa1 = {
        content: $( '#box38' ),
        name: "usa1"
        };
    var usa2 = {
        content: $( '#box3,#box17' ),
        name: "usa2"
        };
    var afr = {
        content: $( '#box29' ),
        name: "afr"
        };
    var asi = {
        content: $( '#box4,#box11,#box12,#box14,#box15,#box16,#box22,#box24,#box26,#box30,#box31,#box34,#box35,#box36' ),
        name: "asi"
        };
    var aus = {
        content: $( '#box2' ),
        name: "aus"
        };

    var kontinent = [europa, usa1, usa2, afr, asi, aus];
    var content = $('#content');
    var precon = content.html();
    var i = 0;

    $('#world-weltkartelinks a').click( function( event ) {
        event.preventDefault();
        i = 0;

        while ( i <= 5 ) {
            if ($(this).attr('data-region') == kontinent[i].name) {
                content.html(precon + kontinent[i].content.html());
            };
            i++;
        };
    });
  });

Answer 1

根据您可以更改代码设置的程度，拥有一个主要对象可能会更好，从而消除了首先循环的需要，类似于他的:

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

现在的好处是您可以访问 kontinent 而无需循环访问它。但是，要获取 content 属性中所有选择器的 html 内容，您仍然需要一个循环。类似这样:

var kontinent = regions;
var content = $('#content');
var precon = content.html();

$('#world-weltkartelinks a').click( function( event ) {
    var region = $(this).attr('data-region')

    if (kontinent[region]) { // no more looping needed
        var allBoxes = '';

        $(kontinent[region].content).each(function () { // still needs to loop to extract all HTML values for all selectors.
            return allBoxes += this.innerHTML;
        });

        content.html(precon + allBoxes);
    }
}

---

DEMO - 使用对象而不是数组

---

该演示使用的是缩小版，因为我没有您的实际 HTML 来查看使用主要对象的工作演示:

var regions = {
    europa: {
        content: $('#box1,#box5,#box6,#box7,#box8,#box9,#box10,#box13,#box18,#box19,#box20,#box21,#box23,#box25,#box27,#box28,#box32,#box33,#box37')
    },
    usa1: {
        content: $('#box38')
    }
};

var kontinent = regions;
var content = $('#content');
var precon = content.html();

var region = 'europa';
if (kontinent[region]) {
    var allBoxes = '';

    $(kontinent[region].content).each(function () {
        return allBoxes += this.innerHTML;
    });

    content.html(precon + allBoxes);
}