1

Всем привет, нужна помощь. Есть код:

<div id="gift10">
    <img class="gift-block-image black">
    <h2>Тайный подарок #1</h2>

<ul id="gift-colors">
        <li class="black checked"></li>
        <li class="red"></li>
        <li class="blue"></li>
        <li class="yellow"></li>
    </ul>
</div>

jQuery:

$(function() {
    $(".gift ul li").click(function() {
        $(this).closest("ul").find("li").removeClass("checked");         
        $(this).toggleClass("checked");
        $(this).closest(".gift").find(".gift-block-image").addClass('red');         
    })
});

Сейчас по клику на li к классу "gift-block-image" добавляется еще один класс "red". Подскажите, каким образом можно сделать так, чтобы вместо "red" добавлялось название класса ("blue", "yellow"...), на который кликнули?

5
  • Думаю ваш вопрос можно просто закрыть т.к такое ощущение что вы нарочно спутали код и хотите чтобы кто то решал ребус.... Можете показать у вас в коде что то с класом .gift ? или надо предположить что это .gift10 ?
    – Arsen
    15 июл 2018 в 18:16
  • @Arsen Код в вопросе - смесь из верстки автора и скрипта из моего ответа на ru.stackoverflow.com/questions/855839
    – user176262
    15 июл 2018 в 18:26
  • @Igor может это просто дубликат?
    – Arsen
    15 июл 2018 в 18:29
  • @Arsen Не, это автор потихонечку делает свое задание из кусков :).
    – user176262
    15 июл 2018 в 18:30
  • 1
    @Igor, я так и понял )) + от меня наставнику ))
    – Arsen
    15 июл 2018 в 18:33

1 ответ 1

1
<div class="gift" id="gift...">
  ...
  <ul id="gift-colors">
    <li data-color="black" class="black checked"></li>
    <li data-color="red" class="red"></li>
    <li data-color="blue" class="blue"></li>
    <li data-color="yellow" class="yellow"></li>
  </ul>

$(function() {
    $(".gift ul li").click(function() {
        var $img = $(this).closest(".gift").find(".gift-block-image");
        var oldColor = $(this).closest("ul").find("li.checked").data("color");         
        $img.removeClass(oldColor);
        $img.addClass($(this).data("color"));         

        $(this).closest("ul").find("li").removeClass("checked");         
        $(this).toggleClass("checked");
    })
});
4
  • А вы пробовали свой код в работе ?
    – Arsen
    15 июл 2018 в 18:19
  • @Arsen Нет конечно. Код отличный, доверьтесь мне.
    – user176262
    15 июл 2018 в 18:24
  • код супер )) просто на взгляд запускаю код... не будет работать )) хотя по всей вероятности вина Dmitry ))
    – Arsen
    15 июл 2018 в 18:27
  • @Arsen А-а-а, это я невнимательно посмотрел на вопрос, посчитав, что автор учел ответ на его предыдущий вопрос.
    – user176262
    15 июл 2018 в 18:29

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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