laimas,
Цитата:
|
Цитата:
.floor__item.active {
background-color: #A5D8E4;
}
$('div.upsale__block__sub-right-wrap').slice(1).on('change', 'input', function(e) {
var a = $(e.delegateTarget).find('input'), chk = a.slice(1);
if(a.eq(0)[0]==this) {
chk.prop('checked', false);
this.disabled = true;
$(e.delegateTarget).find('.floor__item').removeClass('active')
}else {
var c = chk.filter(':checked').length;
a.eq(0).prop({checked: c, disabled: !c});
}
$(this).closest('.floor__item').toggleClass('active')
}).find('.floor__item').each(function() {
$(this).children().wrapAll('<label/>')
});
|
Кстати, код свернуть/развернуть надо тоже дополнить:
$('div.upsale__block__bot-right__title-wrap').click(function(e) {
if(e.target.localName!='input') {
$(this).next()
.slideToggle(100)
.end()
.find('img').toggleClass('arrow_down arrow-up')
.end()
.find('.montage__more').hide()
.end()
.find('.invite').show();
}
});
Иначе по флажку тоже будет сворачивать. |
Цитата:
И тут есть момент - closest() не поддерживается IE даже 10+, и при снятии главной галочки, второстепенные снимаются, а окраска с их блоков нет. Подключать 2 полифила для closest() не очень хочется, поэтому я и решил переписать с JS на jQuery код, потому что компактней выходит:) P.S. окрашивать надо не .floor__item, а .floor__item-wrap |
Цитата:
Цитата:
$('div.upsale__block__sub-right-wrap').slice(1).on('change', 'input', function(e) {
var a = $(e.delegateTarget).find('input'), chk = a.slice(1);
if(a.eq(0)[0]==this) {
chk.prop('checked', false);
this.disabled = true;
$(e.delegateTarget).find('.floor__item-wrap').removeClass('active')
}else {
var c = chk.filter(':checked').length;
a.eq(0).prop({checked: c, disabled: !c});
}
//$(this).closest('.floor__item-wrap').toggleClass('active')
//а так для инвалидов
$(this).parents('.floor__item-wrap').toggleClass('active')
}).find('.floor__item-wrap > div').wrap('<label/>');
|
laimas,
Вы мой кумир:) Спасибо огромное! Это то что надо!:dance: Правда IE всё равно не хочет работать с нажатием на блок, а не на input. Но зато другие работают - этого достаточно. Тему скрипта можно закрывать, а тему благодарностей laimas открывать:thanks: p.s. Цитата:
|
Цитата:
Aruta, два дня не копался, наверное надо давать понятные имена, а то можно легко запутаться с вашим кодом и всё не понимать, что такое там написано! Вам такое почему-то запрещено писать? Я имею в виду про то, что вы печатаете много <div>, и ещё обёртки и ещё обёртки...
<details class="upsale_sub_right">
<summary>
<input type="checkbox">
Choose your floor
</summary>
<p class="montage_text">intro text</p>
<div class="floor_items">
<label>
<input type="checkbox" name="groundfloor">
<span class="floor_item_text">Ground floor</span>
</label>
<label>
<input type="checkbox" name="middlefloor">
<span class="floor_item_text">Second floor</span>
</label>
<label>
<input type="checkbox" name="topfloor">
<span class="floor_item_text">Third floor</span>
</label>
<label>
<input type="checkbox" name="apartment">
<span class="floor_item_text">Apartment Building</span>
</label>
</div>
</details>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(".upsale_sub_right").on("change", function(event) {
var inputs = $(this).find("input:not(summary input)");
var parentInput = $(this).find("summary input");
if(parentInput.is(event.target)) {
inputs.prop("checked", parentInput.prop("checked"));
} else {
var checkedInputs = inputs.filter(":checked");
parentInput.prop({
checked: checkedInputs.length !== 0,
indeterminate:
checkedInputs.length !== 0 &&
inputs.length !== checkedInputs.length
});
}
$(this)
.find(".floor_items > label.active:has(:not(:checked))").removeClass("active")
.end()
.find(".floor_items > label:has(:checked)").addClass("active")
;
});
</script>
<style>
.floor_items > label {
display: block;
}
.floor_items > .active {
background-color: #A5D8E4;
}
</style>
|
Хотел сделать финальный вариант, чтобы другие сразу могли его увидеть, но он не работает тут как надо - проще файлами прикладывать:)
|
Цитата:
|
laimas,
этот сайт еще даже не запущен:( Желание заказчика, чтобы работало везде более менее одинаково - вот и кручусь. Сайт мне достался в том виде, в котором есть сейчас. Моих доработок там только пара страниц всего, включая backend для них. Вот теперь могу спокойно приниматься за back для этой страницы. А по поводу поддержки closest(), я знаю что в JS closest и IE не дружат. И тут я думал тоже такая же зависимость причина-следствие сохраняется:) Спасибо за пояснение! |
| Часовой пояс GMT +3, время: 00:07. |