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, время: 13:45. |