如何使用jquery更改动态内容的类名

Question

In my php file I have this code section to get all jpg files form a folder and put them in to img tags.

if ($handle = opendir($dir)) {
    while (false !== ($file = readdir($handle))) {
       if ($file != "." && $file != ".." && strtolower(substr($file, strrpos($file, '.') + 1)) == 'jpg') {
           echo '<div class="image_slider"><img src ="' . $dir . $file . '"/></div>';
       }
    }
    closedir($handle);
}

and then I want to change displaying image by clicking on a links call previous and next.

To do so I'm using jQuery this way..

To show first image without clicking any thing

 $( ".image_slider img" ).first().addClass( "active" );

and then for the other images to load user must clik prvs or next links.

function next_img(){
        $( ".image_slider img" ).closest().next( "active" );
    }

but this function is not working. It doesn't change the class "active" from first one to second one.

I feel I'm missing something. but couldn't find it.

Thank you

Answer 1

i want to enhance your code to follow

$s='';
$first=false;
$handle=@opendir($dir);

if ($handle) {
    $s='<div class="image_slider">';

    while (false !== ($file = readdir($handle))) {
        if ($file != "." && $file != ".." && strtolower(substr($file, strrpos($file, '.') + 1)) == 'jpg') {

            $cls='';
            if (!$first) {$cls='active'; $first=true;}

            $s.='<img class="'.$cls.'" src ="' . $dir . $file . '"/>';

        }
    }

    $s.='</div>';
    closedir($handle);    
}
else {
    echo 'Error in reading image folder-or the dir doesnt exist!';
}

and about slider: you can use the the active to get the current active and then use .next() to get the next element.

i wrote a jsfiddle for you, hope you find it useful a sample jsfiddle about using .next()

the function i wrote is :

function activeNext(){
    var act=$('div.active');
    var img=$('.img_slider');
    if (act.is(img.last())) return false;

    act.removeClass('active').next().addClass('active');  
}

function activePrev(){
    var act=$('div.active');
    var img=$('.img_slider');
    if (act.is(img.first())) return false;

    act.removeClass('active').prev().addClass('active');  
}

just a brief explanation:

1- get the current active and save it in act

2- get all the image and store in img

3- if current active one is first or last one then do nothing

4- remove current active one. find prev/next item and make it active