Home Forums Add-ons Repeater Field Issue with JS function+repeater


Issue with JS function+repeater

  • 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


    // 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();
    $image = get_sub_field(‘image_carousel1’);

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

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

    <?php $i++; ?>

    <?php endif; ?>


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

    carousel.on(‘’, 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”);




    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)

Viewing 1 post (of 1 total)

The topic ‘Issue with JS function+repeater’ is closed to new replies.