如何使用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

You need to find the current active image:

var $current = $('.image_slider .active');

(The $ in $current doesnt do anything, it just shows other developers that $current is or should be a jQuery object)

Remove its active class

$current.removeClass('active');

Then take the current images parent and go up ( prev ) or down ( next ) the DOM to fetch the next .image-slider element.

$next = $current.parent().next();
// OR
$next = $current.parent().prev();

And if $next exists (the active one could have been the last image), give it the active class:

if ($next.length) {
    $next.find('> img').addClass('active');
}

These are the basics, feel free to improve the logic to gain your users experience

Answer 2

尝试这个

$(".active").removeClass("active").next("img").addClass("active");

Answer 3

You don't need to call closest(). See my fiddle for a quick sketch of what you are trying to do.

var el = $("img.active");
el.next().addClass("active");
el.removeClass("active");

Answer 4

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