Показать сообщение отдельно
  #37 (permalink)  
Старый 24.02.2016, 22:22
Аспирант
Отправить личное сообщение для olmensk Посмотреть профиль Найти все сообщения от olmensk
 
Регистрация: 24.02.2016
Сообщений: 33

Сообщение от рони Посмотреть сообщение
olmensk,
достаточно $(".list1, .list2"). или $(".ac-small") или $("ul")
перед циклом .each
Скажите пожалуйста ещё одно, последнее, вот у меня есть ещё один блок, как сделать подобное, что б в один блокнот записалось но с 3х аккордионов, НО 1и2 окрашивают bottom1, а 3й аккоридон окрашивает bottom2?

Просто если вставляю перед each ещё и list3, тогда аккордион закрашивает не тот div
а когда отдельно вставляю скрипт, то надпись из аккордионов 1и2 заменяется надписью из аккордиона3

<div class="bottom1"></div><!--блок1 который будет закрашен выбранной картинкой из любого акордеона 1и2-->

<div class="bottom2"></div><!--блок2 который будет закрашен выбранной картинкой из акордеона 3-->

<div class="bloknot"></div><!--блок в котором напишется название картинки которая закрасит блок bloknot-->
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container1"><!--аккордион1-->
<div>
 <input id="ac-1" name="accordion-1" type="checkbox" />
  <label for="ac-1">аккордеон1</label>
   <article class="ac-small">
     <ul class="list1">
       <li path-img="images/a1.jpg"><img src="images/a1.jpg" data-title="надпись a1"></li>
       <li path-img="images/a2.jpg"><img src="images/a2.jpg" data-title="надпись a2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container2"><!--аккордион2-->
<div>
 <input id="ac-2" name="accordion-1" type="checkbox" />
  <label for="ac-2">аккордеон2</label>
   <article class="ac-small">
     <ul class="list2">
       <li path-img="images/b1.jpg"><img src="images/b1.jpg" data-title="надпись b1"></li>
       <li path-img="images/b2.jpg"><img src="images/b2.jpg" data-title="надпись b2"></li>
     </ul>
   </article>
  </div>					
</section>
<!------------------------------------------------------------------------------------------------------------->
<section class="ac-container3"><!--аккордион3-->
<div>
 <input id="ac-3" name="accordion-1" type="checkbox" />
  <label for="ac-3">аккордеон2</label>
   <article class="ac-small">
     <ul class="list3">
       <li path-img="images/c1.jpg"><img src="images/c1.jpg" data-title="надпись c1"></li>
       <li path-img="images/c2.jpg"><img src="images/c2.jpg" data-title="надпись c2"></li>
     </ul>
   </article>
  </div>					
</section>

$(function() {
    var arrText = [];
    $(".list1, .list2").each(function(indx, ul) {
        arrText[indx] = "";
        $("li", ul).click(function() {var img_path = $(this).attr("path-img"),title = $("img", this).data("title");
            $(".list1 li").css("border-color", "white");
            $(this).css("border-color", "#000");
            $(".bottom1").css("background", "url(" + img_path + ") repeat");
            arrText[indx] = title;
            $(".bloknot").html(arrText.join("<br>"))})
    })
});


Это последнее, честное слово )
Ответить с цитированием