0

Есть у меня целый список элементов-ссылок. Каждому присвоен класс .clm и различные id. И есть классы в CSS с такими точно именами как и id, но по умолчанию они выключены. Нужно сделать так, чтобы при нажатии на ссылку имя id каким-то образом вытягивалось в переменную и для .back-image (класс, где меняется фон) добавлялся класс дополнительный из тех скрытых {addClass(this.id) } То есть имя id должно включать класс с таким же именем. Немного кода. CSS:

//по умолчанию они нигде не присвоены, назовем их "скрытые".
    .arts{
        background: url("../images/arts.svg") no-repeat center center;
    }
    .video{
        background: url("../images/video.svg") no-repeat center center;
    }

(x)HTML:

<a xlink:href="#" id="arts" class="clm">Arts</a>
<a xlink:href="#" id="video" class="clm">Video</a>

<div class="back_img"></div> //там меняется фон, который добавляется из какого-либо скрытого класса

Мой калечный JS:

$(document).ready(function(){
$('.clm').клик(получить его id)
});
   $('.clm').click(function()){
    $('.back_img').addClass(класс с именем как и у id)
   }
});

1 ответ 1

1

Если я правильно понял, то так.

$('.clm').click(function(){

   var id = $(this).prop('id'); // можно ещё так this.id

   $('.back_img').addClass(id);

});
4
  • Да, почти) Только первый раз я могу включить. Но следующие кнопки уже не работают. Я после addClass (и перед пробовал) добавил такую $('.back_img').removeClass(id);, но не работает 12 авг 2016 в 14:26
  • @ArtyomOleynichenko - так объясните, когда должен вызываться removeClass - в вопросе об этом ничего нет.
    – user176262
    12 авг 2016 в 14:33
  • Нет, все заработало. Я зря удалил первую $(document).ready(function() - без неё не работало. Спасибо ) 12 авг 2016 в 14:41
  • Только если часто будешь кликать, то может сразу два класса добавиться. Можно добавить логики с .hasClass() или .toggleClass() или хардкорно в начале клика делать $('.back_img').removeClass('arts').removeClass('video') 12 авг 2016 в 14:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.