Как я могу скопировать значения атрибутов из ряда элементов и скопировать каждый из них в отдельный элемент? - PullRequest
Новая
       3

Как я могу скопировать значения атрибутов из ряда элементов и скопировать каждый из них в отдельный элемент?

1 голос
/ 22 октября 2019

У меня есть несколько элементов тега <a class="banner2">, каждый из которых имеет различное значение background image url и href. 

<a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_template_directory_uri(); ?>/images/koniaris.jpg');">

</a>

У меня также есть одинаковое количество различных элементов <a class="banner3"> который я хочу иметь одинаковое фоновое изображение и значение href соответственно. 

<a href="#" target="_blank" class="banner3">

</a>

Я имею в виду, что для каждого из элементов .banner2 я хочу, чтобы соответствующий элемент .banner3 имел свое фоновое изображениеurl и href value.

Итак, как мне зациклить оба класса и скопировать значения атрибута?

1 Ответ

1 голос
/ 22 октября 2019

Вы можете попробовать вот так: размеры CSS просто так, что элементы появляются во время тестирования, а красная граница просто указывает, что есть что.

Захватите ссылку на все элементы класса banner3 которые должны иметь свой фоновый набор, а также захватить список узлов всех элементов, из которых можно выбрать фоновое изображение. Выполните итерацию по списку узлов и выберите соответствующий другой узел на основе индекса i - назначьте фон.

Это показывает только копируемое фоновое изображение - так как атрибуты href одинаковы, то, кажется, не так многоскопируйте этот атрибут, но это будет тривиальная задача. 

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Copy background image to corresponding element</title>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
                let col=Array.prototype.slice.call( document.querySelectorAll('a.banner3') );
                Array.prototype.slice.call( document.querySelectorAll('a.banner2') ).forEach( ( a, i )=>{
                    col[ i ].style.backgroundImage=a.style.backgroundImage;
                })
            });
        </script>
        <style>
            .banner2, .banner3{ display:block; width:300px; height:300px; margin:1rem; }
            .banner3{ border:1px solid red; }
        </style>
    </head>
    <body>

        <a href="#" target="_blank" class="banner2" style="background-image:url('images/25398691_10214872887759191_3871602197915899055_n.jpg');"></a>
        <a href="#" target="_blank" class="banner2" style="background-image:url('images/27972581_10157094423021258_4761504312023581045_n.jpg');"></a>
        <a href="#" target="_blank" class="banner2" style="background-image:url('images/183096_1908068104875_1336992821_2226175_4522067_n.jpg');"></a>



        <a href="#" target="_blank" class="banner3"></a>
        <a href="#" target="_blank" class="banner3"></a>
        <a href="#" target="_blank" class="banner3"></a>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...