Добавить элемент к определенному идентификатору, для циклов и анонимных функций? - PullRequest
Новая
       9

Добавить элемент к определенному идентификатору, для циклов и анонимных функций?

2 голосов
/ 09 июня 2019

Я создал узел элемента с именем figBox для элемента figure , установив для его атрибута id значение "styleThumbs" и попытки добавить его в элемент div с идентификатором «box».

Затем мне нужно было заполнить поле рисунка, вставив цикл for с индексом, который идет от 0 до 4. В этом цикле я хотел создать узел элемента img с именем «sheetImg» с атрибутом src «na_small_num». png "и alt значение атрибута" na_style_num.css "(где num - это значение индекса в цикле for).

Наконец, мне нужно было, чтобы браузер загрузил другую таблицу стилей, когда пользователь щелкает одно из миниатюрных изображений, добавляя обработчик событий в «sheetImg», который запускает анонимную функцию, изменяющую атрибут href связать элемент с идентификатором «fancySheet» со значением атрибута alt цели события.

Вот что я уже пробовал: 

var figure = document.createElement("figBox");
            figure.setAttribute("id", "styleThumbs");
            document.getElementById("box").appendChild(figure);

   for (var i = 0; i = 3; i++) {
   var img = document.createElement("sheetImg");
             img.setAttribute("src", "na_small_num.png");
             img.setAttribute("alt", "na_style_" + [i] + ".css");

sheetImg.onclick = styleElm.seAttribute("href", "alt");
sheetImg.appendChild(figure);

Программа, проверяющая мой код, возвращает это как неправильное, что неудивительно, учитывая, что я совершенно неопытен. Куда я здесь не так?

EDIT

Все, спасибо за вашу помощь. Я выяснил множество вопросов здесь. Вот правильный код: 

var figBox = document.createElement("figure");
             figBox.setAttribute("id", "styleThumbs");
             document.getElementById("box").appendChild(figBox);

for (var i = 0; i < 5; i++) {
   var sheetImg = document.createElement("img");
                  sheetImg.setAttribute("src", "na_small_" + i + ".png");
                  sheetImg.setAttribute("alt", "na_style_" + i + ".css");
                  sheetImg.onclick = function(e) {
                     document.getElementById("fancySheet").href = e.target.alt;
                  }
                  figBox.appendChild(sheetImg);
}

var thumbStyles = document.createElement("style");
document.head.appendChild(thumbStyles);

Ответы [ 2 ]

0 голосов
/ 09 июня 2019

HTML 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="na_style_8.css">
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

Javascript 

<script type="text/javascript">
    var figure = document.createElement('figBox'),
        loadStylesheet = (stylesheet) => {
            stylesheetElement.setAttribute('href', stylesheet + '?' + new Date().getTime());
        },
        stylesheetElement = document.querySelector('link[href="na_style.css"]');

    figure.setAttribute('id', 'styleThumbs');
    document.getElementById('box').appendChild(figure);

    for (var i = 0; i < 4; i++) {
        var sheetImage = document.createElement('sheetImage');
        sheetImage.setAttribute('src', 'na_small_num.png');
        sheetImage.setAttribute('alt', 'na_style_' + [i] + '.css');

        // Populate figBox with created sheetImage
        figure.appendChild(sheetImage);

        // Add click event listener to sheetImg element
        sheetImage.addEventListener('click', (event) => {
            // Load stylesheet with anonymous function
            loadStylesheet(event.target.getAttribute('alt'));
        });
    }
</script>
0 голосов
/ 09 июня 2019

Согласно вашему описанию, я понял несколько вещей, проверьте приведенный ниже код и дайте мне знать, если что-то не так. 

var box = document.createElement('div');
    var link = document.createElement('link');
    link.setAttribute("href", "defaultStyle.css");
    document.body.appendChild(box);
    document.head.appendChild(link);
    var figBox = document.createElement('figBox');
    figBox.setAttribute("id", "styleThumbs");
    box.appendChild(figBox);

    var linkTag = document.createElement('div');
    document.body.appendChild(linkTag);
    
    for (var i = 0; i <= 3; i++) {
        var img = document.createElement("img");
        img.setAttribute("src", "na_small_" + i + ".png");
        img.setAttribute("name", "sheetImg");
        img.setAttribute("alt", "na_style_" + i + ".css");
        img.addEventListener('click', function(e) {
            link.setAttribute("href", e.srcElement.alt);
            linkTag.innerHTML = link.href;
        });
        figBox.appendChild(img);
    }
img {
cursor: pointer;
}
<html>

<head>
</head>

<body>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...