set var - от частичного имени класса этого

0

Поэтому у меня есть меню пули, которое автоматически создается, и каждый элемент получает добавленное к нему имя класса.
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>


Im в основном просто пытается это сделать:
homeSlide1
homeSlide2
homeSlide3

В этом:
100%
200%
300%

  • 0
    Выглядит как идентификатор, а не имя класса. Что вы пытались решить проблему? Пожалуйста, отправьте соответствующий код.
  • 0
    Во-первых, это id , а не классы. Во- вторых, я бы вместо этого использовать класс с data- атрибутом, так что вы получите что - то вроде <div class="home-slide" data-id="1"></div>
Показать ещё 2 комментария
Теги:

2 ответа

0
Лучший ответ

Вот один из способов сделать это:

$('#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/

Поделиться
  • 0
    Спасибо, Пит, это мне очень помогло, работает отлично. Просто нужно вместо этого включить его в событие клика.
  • 0
    Я бы проголосовал за тебя, но мне не хватает представителя хаха! плюс 1 для вас, сэр
0

Спасибо за помощь, ее очень ценят. В конце концов я использовал это.

    $('#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
    });
});

Теперь просто нужно выяснить, как включить навигационные стрелки, но этот код может, вероятно, использоваться и для этого.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню