Динамически добавлять атрибут данных в тег Img - PullRequest
Новая
       24

Динамически добавлять атрибут данных в тег Img

1 голос
/ 09 апреля 2020

Я хочу добавить «data-index =» к каждому тегу img в массиве. Оно должно равняться количеству в массиве. Например, это напечатало бы "<img class="gallery-item" data-index="1" src="<?php the_field('image'); ?>" alt=""> и так далее. Может кто-нибудь посоветовать, как выполнить sh вот как выглядит мой код:

* ОБНОВЛЕННЫЙ КОД ДЛЯ ОТРАЖЕНИЯ ОТВЕТА

HTML

<div id="container" class="isotope" data-element="gallery-item">
    <?php 
    $idx=0;
    $args = array(
        'post_type' => 'Photos',
    );
    $_posts = new WP_Query($args);
    ?>
    <?php 
    if ( $_posts->have_posts() ) : while ( $_posts->have_posts() ) : $_posts->the_post(); ?>

    <div class="grid-item" data-filter="<?php 
        $categories = get_the_category(get_the_id());
        foreach ($categories as $category){ 
        echo $category->slug;}?>">
    <a onClick='showDialog()' data-target="#lightbox">
    <img class="gallery-item" data-index="<?php esc_attr_e( $idx ); ?>" src="<?php the_field('image'); ?>" alt="">
    </a>
    </div>
    <?php
    $idx++;
    endwhile; endif;
    ?>
</div>

1 Ответ

0 голосов
/ 09 апреля 2020

Вы должны создать переменную для хранения индекса (например: $idx) и увеличивать его на каждом l oop: 

<div id="container" class="isotope" data-element="gallery-item">
    <?php 
    $args = array(
        'post_type' => 'Photos',
    );
    $_posts = new WP_Query($args);
    $idx = 0; // start the index
    ?>
    <?php 
    if ( $_posts->have_posts() ) : while ( $_posts->have_posts() ) : $_posts->the_post(); ?>

    <div class="grid-item" data-filter="<?php 
        $categories = get_the_category(get_the_id());
        foreach ($categories as $category){ 
        echo $category->slug;}?>">
    <a onClick='showDialog()' data-target="#lightbox">
    <img data-index="<?php echo $idx; ?>" class="gallery-item" src="<?php the_field('image'); ?>" alt="">
    </a>
    </div>
    <?php
    $idx++; // increments the index
    endwhile; endif;
    ?>
</div>
...