Question

var first_left = ['Photo', 'Info', 'Question 1', 'Question 2', 'Question 3', 'Question 4', 'Question 5'];

var names = ['Abuela', 'Abuelo', 'Oma'];

function display() {
    for (var y = 0; y < names.length; y++) {
        var rc = document.getElementById('firstR');
        var div1 = $("<div></div>");
        var div2 = $("<div></div>");
        div2.addClass(names[y]);
        $(rc).append(div1);
        $(rc).append(div2);
        $(div1).css("border", "0px solid green");
        $(div2).css("border", "5px solid black");
        $(div1).css("height", "80px");
        $(div1).css("margin-top", "3em");
        $(div2).css("height", "380px");
        $(div2).css("margin-top", "3em");
        $(div2).css("margin-bottom", "12em");
        var h = $("<h1></h1>");
        $(h).html(names[y]);
        $(h).css("font-size", "60px");
        $(h).css("margin", "auto");
        $(h).css("text-align", "center");
        $(div1).append(h);

        for (var z = 0; z < first_left.length; z++) {
            var lc = document.getElementById('firstL');
            var div = document.createElement('div');
            div.className = first_left[z];
            var p = document.createElement('p');
            p.innerHTML = first_left[z];
            div.appendChild(p);
            lc.appendChild(div);
            p.style.margin = 'auto';
            p.style['font-size'] = '25px';
            p.style['text-align'] = 'center';
            div.style.border = '0px solid black';
            div.style.height = '40px';
            div.style.width = '120px';
            div.style['margin-top'] = '3em';
            if (z == 6) {
                div.style['margin-bottom'] = '10em';
            }
            div.style['background-color'] = 'deepskyblue';
            div.style['grid-row'] = [z + 1] + '/' + [z + 2];
            div.style.transition = "transform .5s";
            div.style['border-radius'] = '10px';
            $(div).hover(function () {
                $(this).css({
                    transform: 'scale(1.3)'
                });
            }, function () {
                $(this).css({
                    transform: 'scale(1)'
                })
            });
            if (y == 0 && z == 0) {
                div.onclick = function() {
                    $("." + names[0]).css("backgroundImage", "url('abuelos/oma.jpg')");
                    $("." + names[0]).css("backgroundSize", "550px 500px");
                }
            };
            if (y == 1 && z == 0) {
                div.onclick = function() {
                    $(div2).css("backgroundImage", "url('abuelos/gma.jpg')");
                    $(div2).css("backgroundSize", "cover");
                }
            }
        }
    };
};

display();

.whole {
    display: flex;
    justify-content: space-between;
}

.left {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px 80px 80px 80px 80px 80px 80px;
}

.left_column {
    grid-column: 2/3;
}

.right_column {
    width: 100%;
    height: 560px;
    margin-right: 3em;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Home Page | Roctober92.net</title>
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="abuelos.css">
    </head>
    <body>
        <main>
            <div class="whole" id="one">
                <div class="left">
                    <div class="left_column" id="firstL">
                    </div>
                </div>
                <div class="right_column" id="firstR">
                </div>
            </div>

            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script src="abuelos.js"></script>
        </main>
    </body>
</html>

我的目标：

通过for-loop
使用name == list [y]
使用不同的列表项（z）
如果y ==（数字）和z ==（数字），请编辑特色类的CSS

问题：它只有在我将项目称为$（div2）时才有效，它会编辑我追加的最后一个div2，而不是特定的div2。我宁愿编辑我追加的第一个div2（名称[0]作为类名）。但它没有认识到它。在代码片段中，当您在第一个框旁边按“照片”时，图片应显示在框中。

Answer 1

类名不能包含空格。将该空间用作类时，将该空格替换为另一个字符，例如下划线。

    div2.addClass(names[y].replace(/\s/g, ' ');


    $("." + names[0].replace(/\s/g, ' ')).css("backgroundImage", "url('abuelos/oma.jpg')");

Answer 2

感谢Barmar，这些是我所做的修改。

$(names[0])  -->  $("." + (names[0]))

// Classes can't have spaces: 
div2.addClass(names[y]); //--> 
div2.addClass(first_left[y] + "a");

// first_left's items don't have spaces

$("." + first_left[0] + "a");

在if语句和for循环中编辑CSS类

2 个答案: