Сообщение от рони
|
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>"))})
})
});
Это последнее, честное слово )