jquery和javascript在类之间切换图像标签

Question

I can not seem to get this right. Please help. The code is supposed to toggle the class of an img tag when a user clicks on a div.

Here is the HTML

        <li><img src="IMG/Gallery/val_day.jpg" id="img27" style="width: 100%;" alt="val_day" /></li>
            </ul>


        </div>
            <p id="previousLink" href="#">«</p>
        <p id="nextLink" href="#">»</p>
        </div>

and here is my jQuery and Javascript.

$(document).ready(function () {
var Gallery = {
    li: [''],
    picNum: 0,
    nextPic: function () {
        $('#nextLink').click(function () {
            var $activeImg = "'#img" + Gallery.picNum + "'";
            $($activeImg).toggleClass('activePic');
            Gallery.picNum++;
            $activeImg = "'#img" + Gallery.picNum + "'";
            $($activeImg).toggleClass('activePic');

        });
    }
}

});

Answer 1

The problems I see are how the jQuery selectors are looking for images.

Remove the apostrophes. For example, change var $activeImg = "'#img" + Gallery.picNum + "'"; to:

var $activeImg = "#img" + Gallery.picNum.toString();

The same thing should be done with the second $activeImg.

My other comment is on convention. By convention, in my experience, a variable representing a jQuery object should be prefixed with a $. $activeImg doesn't seem to be a jQuery object. It's a string. Use activeImageSelector instead (a suggestion).

Updated JS

$(document).ready(function () {
    var Gallery = {
        li: [''],
        picNum: 0,
        nextPic: function () {
            $('#nextLink').click(function () {
                var activeImageSelector  = "#img" + Gallery.picNum.toString();
                $(activeImageSelector ).toggleClass('activePic');
                Gallery.picNum++;
                activeImageSelector  = "#img" + Gallery.picNum.toString();
                $(activeImageSelector ).toggleClass('activePic');

            });
        }
    }
});