Поочередное скрытие div
Имеются блоки (window), у всех display:none
<div class="window1"></div> <div class="window2"></div> <div class="window3"></div> <div class="window4"></div> <div class="window5"></div> <div class="window6"></div> <div class="window7"></div> <div class="window8"></div> И есть checkbox 9 штук: <input type="checkbox" id="checkb" /> <label for="checkb">Чекбокс</label> <input type="checkbox" id="che1" /> <label for="che1">Еще</label> Как сделать так, что бы при выборе checbox, например 3 штук к классам window1 window2 и window3 присвоился disblay:bclok? Соотвественно и обратно, убрали галочки, остался один активированный checkbox, следовательно только у window1 disblay:bclok |
ДОшло только до
var checboxz=$("input[type='checkbox']");
checboxz.change(function(){
var window='';
checboxz.each(function(){if($(this).is(':checked')){window+=[S]zzz[/S];}});
});
|
Смог выполнить подсчет количества выбранных чекбоксов
var countChecked = function() {
var n = $( 'input:checked' ).length;
$( '#macs .window').text( n + ' выбрано!' );
};
countChecked();
$( 'input[type=checkbox]' ).on( 'click', countChecked );
Но ни как не пойму, как мне количество выбранных чекбоксов n, дописать к классу window. Что бы получилось window1 - при выборе 1 чекбокса. При выборе 3х чекбоксов window3 |
k_DizeL,
можно ли как то однозначно сделать описание ? |
рони,
<style>.window1, .window2, .window3, .window4,. window5, .window6, .window7, .window8 {disblay:none}</style>
<div class="window1"></div>
<div class="window2"></div>
<div class="window3"></div>
<div class="window4"></div>
<div class="window5"></div>
<div class="window6"></div>
<div class="window7"></div>
<div class="window8"></div>
<input type="checkbox" id="checkb" /> <label for="checkb">Чекбокс</label> <input type="checkbox" id="che1" /> <label for="che1">Еще</label> <input type="checkbox" id="fg" /> <label for="fg">Чекбокс</label> <input type="checkbox" id="hh" /> <label for="hh">Еще</label> <input type="checkbox" id="checkb" /> <label for="checkb">Чекбокс</label> <input type="checkbox" id="che1sd" /> <label for="che1sd">Еще</label> <input type="checkbox" id="asd" /> <label for="asd">Чекбокс</label> <input type="checkbox" id="xzxc" /> <label for="xzxc">Еще</label> При установленных (включенных) влажках на 3 чекбоксах:
.window1, .window2, .window3 {display:block}
Если ставим на 2 чекбоксах галочки, то:
.window1, .window2{display:block}
.window3 {display:none} /* и остальные window4 5 6 7 8 */
Каждый включенный флажек (не важно какой по порядку), ставит для window display:block, так же и убирает. |
k_DizeL,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.win {
display: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var $divs = $("div.win"), $inps = $("input.win");
$inps.click(function() {
var len = $inps.filter(":checked").length
$divs.hide().slice(0,len).show()
});
});
</script>
</head>
<body>
<div class="win">window1</div>
<div class="win">window2</div>
<div class="win">window3</div>
<div class="win">window4</div>
<div class="win">window5</div>
<div class="win">window6</div>
<div class="win">window7</div>
<div class="win">window8</div>
<input type="checkbox" id="checkb" class="win"/>
<label for="checkb">Чекбокс</label>
<input type="checkbox" id="che1" class="win"/>
<label for="che1">Еще</label>
<input type="checkbox" id="fg" class="win"/>
<label for="fg">Чекбокс</label>
<input type="checkbox" id="hh" class="win"/>
<label for="hh">Еще</label>
<input type="checkbox" id="checkb" class="win"/>
<label for="checkb">Чекбокс</label>
<input type="checkbox" id="che1sd" class="win"/>
<label for="che1sd">Еще</label>
<input type="checkbox" id="asd" class="win"/>
<label for="asd">Чекбокс</label>
<input type="checkbox" id="xzxc" class="win"/>
<label for="xzxc">Еще</label>
</body>
</html>
|
Именно так, вот только class="win" не такой. А обязательно class="window1"
и так далее. Это важно |
Цитата:
var $divs = $('[class^="window"]'), |
Просматривал, но подходящего ничего не находил, потому что логика выполнения скрипта у меня была совсем другая.
Читал про селекторы тут http://jquery.page2page.ru/index.php5/Селекторы |
k_DizeL,
Селектор по началу атрибута |
Цитата:
Самая мякотка в том, что нахер вообще не нужны тут никакие индентификаторы у дивов пресловутых. Индекс чек-бокса в массиве коллекции == индексу дива в массиве коллекции. |
Цитата:
|
Это условие сформулировано при отсутствии такой информации. Автор небось уже переписал рендер и тащится как удав на сковородке.
Вот если бы была карта - див-вам - чек-нам, див-сюда - чек-отсюда - это я понимаю надо идентифицировать. А когда оно отрендерено с одного индекного массива - какого там вообще. |
kostyanet,
зачем вы захламляите темы бесполезным флудом и бессвязным жаргоном?впрочем я вам его уже задавал.гадить в темах, с чувством собственного превосходства, видимо ваша страсть. |
Это вы гадите забивая темы бессмысленными телегами кодов на любую глупость читателя, а я ему пытаюсь объяснить в чем она заключается, и что на самом деле все может быть в стопицот раз проще. Коню ясно вам это не нравится. Не будет глупых вопросов - не на что будет постить телеги.
Самая мякотка в том, что автор может намеренно тупить не желая раскрывать истинную картину. Например эти самые чеки со связанными через щелчок дивами - это же стандартный интерфейс табов. И что, он так же делается подстановкой порядкового нумера в идентификатор? |
kostyanet,
<iframe width="640" height="360" src="https://www.youtube.com/embed/MJnWhzuCXVw?feature=player_embedded" frameborder="0" allowfullscreen></iframe> |
| Часовой пояс GMT +3, время: 07:17. |