Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

i have this code that shows different servers to watch a videos on

the 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>

my proplem that it display like this

<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>

they all have data-server="1"

and in here to they have iframes[1]

<script>
var embedMe = function(id, jQobj) {
var iframes = {};
iframes[1] = '<iframe width="100%" height="400" src="/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="/" frameborder="0" allowfullscreen></iframe>';
iframes[1] = '<iframe width="100%" height="400" src="/" 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>

i want it to be like this data-server="1" data-server="2" data-server="3" data-server="4" etc. iframes[1] iframes[2] iframes[3] iframes[4] etc.

so when i click on any server it shows one of the iframes like this data-server="1" opens iframes[1] data-server="2" opens iframes[2] data-server="3" opens iframes[3] data-server="4" opens iframes[4] etc.

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 4 years ago.

i have this code that shows different servers to watch a videos on

the 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>

my proplem that it display like this

<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>

they all have data-server="1"

and in here to they have iframes[1]

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

i want it to be like this data-server="1" data-server="2" data-server="3" data-server="4" etc. iframes[1] iframes[2] iframes[3] iframes[4] etc.

so when i click on any server it shows one of the iframes like this data-server="1" opens iframes[1] data-server="2" opens iframes[2] data-server="3" opens iframes[3] data-server="4" opens iframes[4] etc.

• php
• theme-development
• custom-field
• javascript
• metabox

1 Answer 1

You need to have an iterator that counts. I'm only including the foreach loops:

<?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. } ?> 

Same here:

<?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++; } ?>