Issue with JS function+repeater

• [email protected]

• December 8, 2017 at 2:34 am

I combined a jquery slider with the repeater fields.
under the repeater, I have 2 subfields. one called “image_carousel1” and the other “image_carousel_discription”

this slider has a class called “sc-selected” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).

I’m trying to define that when the class “sc-selected” is on some image and the “data-row” is equal in “image11” and “change_h2″ the “image_carousel_discription” form the same row of the “image_carousel1” will appear,(I defined that in JS func)

this is the code that displays the images and the titles

<?php

// check if the repeater field has rows of data
$i = 1;
if( have_rows(‘carousel_images’) ):
// loop through the rows use_cases_fields data
while ( have_rows(‘carousel_images’) ) : the_row();
$title=get_sub_field(‘image_carousel_discription’);
$image = get_sub_field(‘image_carousel1’);

if( !empty($image) ):
// thumbnail
$thumb = $image;
?>

<li id=”image11″ data-row=”<?php echo $i; ?>” > <a
href=”#home”>“/>
<h2 id=”change_h2″ data-row=”<?php echo $i; ?>”><?php
echo $title ?></h2>

<?php $i++; ?>

<?php endif; ?>

<?php
endwhile;
endif;
?>

JS- the “carousel on” adding the class “sc-selected” to image.

carousel.on(‘itemSelected.sc’, function (evt) {

$(“#change_h2”).each(function(index, elem){

$(“#image11”).each(function(index2, elem2){
var itemH3 = $(elem).attr(‘data-row’);
var itemImg = $(elem2).attr(‘data-row’);

if (itemH3==itemImg){
var div1 = document.getElementById(“change_h2”);
var align = div1.getAttribute(“data-row”);

console.log(align);

}
});
});

});

My problem is with the javascript function, the data row always stays on the first row and in every image that selected it keep showing in console log “1”
(the first data-row)