Question

所以我有一个自动生成的子弹菜单，每个项目都会添加一个类名 homeSlide1，homeSlide2，homeSlide3，ect ...

我需要做的就是点击，获取以“homeSlide”开头的课程然后剥去'homeslide'并将＃保持在最后，
然后将其分配给var（bulletSlideAmount）

var nextSlideLocation = (bulletSlideAmount + '00%');

$('#slideshowIndicators div').click(function(){
    $('.theController').animate({
        marginLeft: nextSlideLocation
        },600,function(){
            //callback
    });
});

<div id="slideshowIndicators">
    <div class="homeSlide1"></div>
    <div class="homeSlide2"></div>
    <div class="homeSlide3"></div>
    <div class="homeSlide4"></div>
</div>

我基本上只想试试这个：
homeSlide1
homeSlide2
homeSlide3

进入这个：
100％
200％
300％

Answer 1

这是一种方法：

$('#slideshowIndicators').find('[class*="homeSlide"]').each(function (i, elem) {
    var allClasses = elem.className, // get all classes
        homeSlides = allClasses.split(/\s+/).filter(function (val, index, array) {
            return val.indexOf('homeSlide') === 0; // return only those that start with 'homeSlide'
        });
    homeSlides.forEach(function (val, index, array) { // use native forEach iterator
        array[index] = val.replace('homeSlide', '') + '00%'; // strip 'homeSlide' from the number and embellish the resulting string
    });
    elem.innerText = homeSlides.join(', '); // using join in case of multiple 'homeSlide' classes
});

工作演示：http://jsfiddle.net/jqYeN/

关于偶然的机会，您希望将其显示为总幻灯片的百分比（即25％; 50％;等），只需更改array[index] =迭代器中的forEach行改为：

array[index] = (parseInt(val.replace('homeSlide', ''), 10) / $('#slideshowIndicators').find('[class*="homeSlide"]').length).toFixed(2) + '%';

工作演示：http://jsfiddle.net/jqYeN/1/

Answer 2

感谢您的帮助，非常感谢。最后我最终使用了这个。

    $('#slideshowIndicators div').click(function(){
    var allClasses = this.className,
        homeSlides = allClasses.split(/\s+/).filter(function (val, index, array) {
            return val.indexOf('homeSlide') === 0;
        });
    homeSlides.forEach(function (val, index, array) {
        console.log(array[index] = val);
        array[index] = val.replace('homeSlide', '') - 1 + '00%';
    });
    nextSlideLocation = homeSlides.join(', ');
    $('.responsiveSliderController').animate({
        marginLeft: '-' + nextSlideLocation
        },600,function(){
            //callback
    });
});

现在只需要弄清楚如何合并导航箭头，但这段代码也可能用于此。

set var - 来自此的部分类名

2 个答案: