2

Есть раскрывающийся список из div элементов. Надо при клике на определенный div передать его значение (изображение с текстом) в заголовок списка, удалить надпись "Выберите модель". После передачи значения список все так же должен раскрываться и работать (при кликах на другие элементы списка их значение так же должно передаваться в заголовок и заменять предыдущее).

    <div class="select-model-auto"><h3>Выберите модель <span id="arrow-list-icon"></span></h3>
<div class="list-model-auto">
    <ul >
        <li><div id="auto1" class="auto"><span>qwerty</span><img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"></div></li>
        <li><div id="auto2" class="auto"><span>qwerty</span><img src="img/EX_7_new-2a506dc3787c6b7beebff360300b256dda0d5ba6aa86370d2811bbe69e4dd6b0.png" alt="img"></div></li>
        <li><div id="auto3" class="auto"><span>qwerty</span><img src="img/models-ranks_img-middle-a1f6d80b0aa6110e7e5d30f80304115af08f1041770f25627cc2039e71b78070.png" alt="img"></div></li>
        <li><div id="auto4" class="auto"><span>qwerty</span><img src="img/models-ranks_img-right-0761cb4392f8a9851d0e29e95a63b3ca659506ba2b32c2e69762602ac9b905ba.png" alt="img"></div></li>
        <li><div id="auto5" class="auto"><span>qwerty</span><img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img"></div></li>
    </ul>
</div>

 <script>
$(document).ready(function() {
  $('div.select-model-auto').click(function () {

    $('span').toggleClass('active');

    $('div.list-model-auto').slideToggle(400 , function () {

    });
});

$('div.auto').click(function () {

    var target = event.target.id;

    alert(target); // идентифицирует элемент

  });
});
</script>

1 ответ 1

0

$(document).ready(function() {
  $('div.select-model-auto').click(function() {
    $('span').toggleClass('active');
    $('div.list-model-auto').slideToggle(400, function() {});
  });
  $('.auto').click(function() {
    $(".select-model-auto>h3").text('')
    $(".select-model-auto>h3").append($(this).html())
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-model-auto">
  <h3>Выберите модель <span id="arrow-list-icon"></span></h3>
  <div class="list-model-auto">
    <ul>
      <li>
        <div id="auto1" class="auto"><span>div1</span>
          <img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img">
        </div>
      </li>
      <li>
        <div id="auto2" class="auto"><span>div2</span>
          <img src="img/EX_7_new-2a506dc3787c6b7beebff360300b256dda0d5ba6aa86370d2811bbe69e4dd6b0.png" alt="img">
        </div>
      </li>
      <li>
        <div id="auto3" class="auto"><span>div3</span>
          <img src="img/models-ranks_img-middle-a1f6d80b0aa6110e7e5d30f80304115af08f1041770f25627cc2039e71b78070.png" alt="img">
        </div>
      </li>
      <li>
        <div id="auto4" class="auto"><span>div4</span>
          <img src="img/models-ranks_img-right-0761cb4392f8a9851d0e29e95a63b3ca659506ba2b32c2e69762602ac9b905ba.png" alt="img">
        </div>
      </li>
      <li>
        <div id="auto5" class="auto"><span>div5</span>
          <img src="img/EX_7-225abdaf68ac36210a336f26b9e6180b68243ae50f8e5ffeacc2ecad63fa1e5c.png" alt="img">
        </div>
      </li>
    </ul>
  </div>

1
  • Пожалуйста, постарайтесь писать более развернутые ответы. Уверен, автор вопроса был бы благодарен за ваш экспертный комментарий к приведенному выше коду. Commented 16 нояб. 2016 в 8:01

Ваш ответ

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

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