jQuery addClass работает на jsfiddle, но не работает

0

Я рассмотрел несколько вопросов, подобных моим, и попытался реализовать их решения, но мне не удалось заставить их работать.

Это код js, который я использую на своем сайте:

jQuery(function($){
   $(".icon_circle").click(function () {
        $('circle').removeClass('clicked');
        $(this).addClass('clicked');
   });

});

Вот jsfiddle: http://jsfiddle.net/AKXTV/3 (он адаптирован из jQuery SVG removeClass())

Вот мой сайт: http://watchcampfire.com/pre

Edit: Похоже, что он не работает в bootply, так что это может быть проблемой, когда он работает вместе с некоторым кодированием Bootstrap. http://www.bootply.com/120685

  • 4
    Вы должны исправить ошибку в консоли ...
  • 0
    $('circle') не является объектом DOM, поэтому вы не можете использовать removeClass() для него.
Показать ещё 1 комментарий
Теги:

4 ответа

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

Я не вижу места, где вы инициализируете этот плагин swiper как это (согласно их веб-сайту):

$(function(){
  var mySwiper = $('.swiper-container').swiper({
    //Your options here:
    mode:'horizontal',
    loop: true
    //etc..
  });
})

Поскольку у вас это не похоже, это может быть причиной Uncaught TypeError: Cannot read property 'classList' неопределенных ошибок. Фиксирование, которое должно заставить вас работать.

ОБНОВИТЬ:

Я думаю, что я понял причину проблемы здесь.

Это должно работать:

$('.icon_circle').on('click', function() {
  $('.icon_circle').attr('class', function(index, classNames) {
      //this is sort of lazy, oh well
      return 'icon_circle';
  });  

  $(this).attr('class', function(index, classNames) {
      return classNames + ' clicked';
  });
});

Там какая-то проблема с добавлением/удалением классов в элементах SVG.

Подробнее здесь: jQuery SVG, почему я не могу добавитьClass?

Поделиться
  • 0
    Я на самом деле работаю с уже созданной темой. Из того, что я вижу, он инициализируется из js / scripts.js. Но это может быть неправильно? Хотя, похоже, что swiper работает, но все равно вызывает ошибки в консоли.
  • 0
    Так что проблема связана с добавлением классов к элементам SVG. См .: stackoverflow.com/questions/8638621/…
Показать ещё 3 комментария
0

В итоге я получил руку помощи от PencilScoop.

Здесь идеальное рабочее решение, которое вообще не использует JS.

Я завернул свой SVG, вот так:

<input type="radio" id="v" name="button" value="video">
<label for="v">
<!-- SVG CODE -->
</label>

Затем добавили это в CSS:

input[type="radio"]:checked + label #shape_ID {
    stroke: #EF4137
}

См. Рабочий код здесь: http://jsfiddle.net/3KnXF/5

Поделиться
0

Возможно, это связано с некоторой недействительной разметкой.

Если вы посмотрите на свой jsFiddle, вам не хватает тегов </g> внутри нескольких тегов <svg/>.

Вы можете сказать, что теги закрытия </svg> будут красными.

У вас также есть <g id="circle"> несколько раз.

Вы не можете иметь несколько элементов с одним и тем же идентификатором.

Поделиться
  • 0
    Спасибо! Я исправил теги <g></g> и удалил идентификаторы кругов (они были созданы при экспорте из AI) на живом сайте. К сожалению, проблема сохраняется.
0

На вашем веб-сайте появляется много ошибок JS, которые останавливают выполнение вашего скрипта. Сначала разрешите эти ошибки, и он должен работать нормально.

Поделиться

Ещё вопросы

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