WordPress : Besoin d’aide pour réparer mes iframes

j’ai ce code qui montre différents serveurs pour regarder une vidéo sur

le code:

<div class="container-disable">
<ul class="tabs-ul nav-justified clearfix">
<?php $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);  if ( $repeatable_fields ) : ?>
<?php foreach ( $repeatable_fields as $field ) { ?>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
<?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>
</a>
</li>
<?php } ?>
<?php endif; ?>
</ul>
<div class="tabs-cntn">
<div id="services-cntn-ajax">
<?php $repeatable_fields = get_post_meta($post->ID,'repeatable_fields', true);
if($repeatable_fields){?>
<iframe frameborder="0" src="<?php echo esc_attr( $field['url'] ); ?>" allowfullscreen=""></iframe>
<?php
} else{

}
?>
<script>
var embedMe = function(id, jQobj) {
var iframes = {};
<?php $repeatable_fields = get_post_meta($post->ID, 'repeatable_fields', true);  if ( $repeatable_fields ) : ?>
<?php foreach ( $repeatable_fields as $field ) { ?>
iframes[1] = '<iframe width="100%" height="400" src="<?php echo esc_attr( $field['url'] ); ?>" frameborder="0" allowfullscreen></iframe>';
<?php } ?>
<?php endif; ?>
if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('notactive');
jQobj.addClass('active');
jQuery('#services-cntn-ajax').html(iframes[id]);
}
jQuery('[data-server]').click(function() {
if (jQuery('li').hasClass('active')) {
return;
}
jQuery('li').parent().find('.buttosn').removeClass('active');
jQuery('li').parent().find('.buttosn').addClass('notactive');
jQuery(this).addClass('active');
jQuery(this).removeClass('notactive');
var id = jQuery(this).data('server');
embedMe(id, jQuery(this));
});
</script>
</div>
</div>
</div>

mon proplem qu’il affiche comme ça

<ul class="tabs-ul nav-justified clearfix">
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>
<li>
<a href="javascript:void(0)" class="buttosn" data-server="1">
<i class="fa fa-play-circle"></i>
serve name example</a>
</li>

</ul>

ils ont tousdata-server="1"

et ici ils ontiframes[1]

<script>
var embedMe = function(id, jQobj) {
var iframes = {};
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="https://example.com/" frameborder="0" allowfullscreen></iframe>';

if (typeof iframes[id] === 'undefined') {
return;
}
jQobj.removeClass('notactive');
jQobj.addClass('active');
jQuery('#services-cntn-ajax').html(iframes[id]);
}
jQuery('[data-server]').click(function() {
if (jQuery('li').hasClass('active')) {
return;
}
jQuery('li').parent().find('.buttosn').removeClass('active');
jQuery('li').parent().find('.buttosn').addClass('notactive');
jQuery(this).addClass('active');
jQuery(this).removeClass('notactive');
var id = jQuery(this).data('server');
embedMe(id, jQuery(this));
});
</script>

je veux que ce soit comme ça
data-server="1"
data-server="2"
data-server="3"
data-server="4"
etc.
iframes[1]
iframes[2]
iframes[3]
iframes[4]
etc.

Ainsi, lorsque je clique sur n’importe quel serveur, l’un des iframes comme celui-ci
data-server="1"s’ouvre iframes[1]
data-server="2"s’ouvre iframes[2]
data-server="3"s’ouvre iframes[3]
data-server="4"s’ouvre , iframes[4]
etc.

Solution n°1 trouvée

Vous devez avoir un itérateur qui compte. Je n’inclus que les foreachboucles:

<?php $data_i = 1; // set the iterator ?>
<?php foreach ( $repeatable_fields as $field ) { ?>

    <li>
        <a href="javascript:void(0)" class="buttosn" data-server="<?php echo $data_i; ?>"><!-- <-- put the iterator here -->
            <i class="fa fa-play-circle"></i>
            <?php if($field['name'] != '') echo esc_attr( $field['name'] ); ?>
         </a>
     </li>
<?php $data_i++; //this is your iterator to count up. } ?>

Pareil ici:

<?php $iframe_i = 1; ?>
<?php foreach ( $repeatable_fields as $field ) { ?>

    iframes[<?php echo $iframe_i; ?>] = '<iframe width="100%" height="400" src="<?php echo esc_attr( $field['url'] ); ?>" frameborder="0" allowfullscreen></iframe>';
<?php $iframe_i++; } ?>