14.02.2017, 11:06
|
|
Аспирант
|
|
Регистрация: 12.01.2017
Сообщений: 48
|
|
|
Не меняется картинка чекбокса
Вырезал кусок кода,проблема в том что не меняется положение background-position,при клике на чекбокс,для класса bx-filter-input-checkbox для картинки задается background-position: 0px -19px; ,а обнулять не хочет при еще одном клике,там еще какой то непонятный js,прошу объяснить что не так)
https://jsfiddle.net/ygvsw4k6/ |
|
14.02.2017, 11:20
|
|
Аспирант
|
|
Регистрация: 12.01.2017
Сообщений: 48
|
|
|
Сам фильтр работает правильно,не меняется только положение для картинки ,вот сам сайт test.gold-999.ru/catalog/rings
|
|
14.02.2017, 11:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
INSIDER73, достаточно css ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bx-filter-parameters-box-container .checkbox:first-child {
margin-top: 0;
}
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
body .bx-filter-input-checkbox {
font-family: 'Roboto-Regular';
font-size: 11px;
text-transform: uppercase;
}
body .bx-filter-input-checkbox {
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
body .bx-filter-input-checkbox input, body .bx-filter-title {
display: none;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
span.bx-filter-param-text {
display: block;
text-align: left;
position: relative;
}
span.bx-filter-param-text:before {
display: inline-block;
width: 17px;
height: 17px;
cursor: pointer;
background: url(http://test.gold-999.ru/bitrix/templates/eshop_bootstrap_blue/images/checkbox.png) no-repeat;
content: '';
left: -22px;
top: -4px;
position: absolute;
}
input[type="checkbox"]:checked + span.bx-filter-param-text:before {
background-position: 0 -15px;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="bx-filter-parameters-box-container">
<div class="checkbox">
<label data-role="label_arrFilter_46_471508825" class="bx-filter-param-label " for="arrFilter_46_471508825">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_471508825" id="arrFilter_46_471508825" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН (<span data-role="count_arrFilter_46_471508825">6</span>)</span>
</span>
</label>
</div>
<div class="checkbox">
<label data-role="label_arrFilter_46_231625436" class="bx-filter-param-label " for="arrFilter_46_231625436">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_231625436" id="arrFilter_46_231625436" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН (<span data-role="count_arrFilter_46_231625436">1</span>)</span>
</span>
</label>
</div>
</div>
</body>
</html>
|
|
14.02.2017, 12:06
|
|
Аспирант
|
|
Регистрация: 12.01.2017
Сообщений: 48
|
|
Сообщение от рони
|
INSIDER73, достаточно css ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bx-filter-parameters-box-container .checkbox:first-child {
margin-top: 0;
}
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
body .bx-filter-input-checkbox {
font-family: 'Roboto-Regular';
font-size: 11px;
text-transform: uppercase;
}
body .bx-filter-input-checkbox {
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
body .bx-filter-input-checkbox input, body .bx-filter-title {
display: none;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
span.bx-filter-param-text {
display: block;
text-align: left;
position: relative;
}
span.bx-filter-param-text:before {
display: inline-block;
width: 17px;
height: 17px;
cursor: pointer;
background: url(http://test.gold-999.ru/bitrix/templates/eshop_bootstrap_blue/images/checkbox.png) no-repeat;
content: '';
left: -22px;
top: -4px;
position: absolute;
}
input[type="checkbox"]:checked + span.bx-filter-param-text:before {
background-position: 0 -15px;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="bx-filter-parameters-box-container">
<div class="checkbox">
<label data-role="label_arrFilter_46_471508825" class="bx-filter-param-label " for="arrFilter_46_471508825">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_471508825" id="arrFilter_46_471508825" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН (<span data-role="count_arrFilter_46_471508825">6</span>)</span>
</span>
</label>
</div>
<div class="checkbox">
<label data-role="label_arrFilter_46_231625436" class="bx-filter-param-label " for="arrFilter_46_231625436">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_231625436" id="arrFilter_46_231625436" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН (<span data-role="count_arrFilter_46_231625436">1</span>)</span>
</span>
</label>
</div>
</div>
</body>
</html>
|
ого спасибо,а можно еще сделать так чтобы когда выбираешь фильтр,он выносился в отдельный блок,типо у нас же может быть много свойств у фильтра,а отмеченые выводятся в отдельный блок?
|
|
14.02.2017, 12:18
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
INSIDER73,
кодировать надо, css тут уже не поможет
|
|
14.02.2017, 12:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Сообщение от INSIDER73
|
|
а если вот так
|
пас, но вариант для медитации
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bx-filter-parameters-box-container .checkbox:first-child {
margin-top: 0;
}
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
body .bx-filter-input-checkbox {
font-family: 'Roboto-Regular';
font-size: 11px;
text-transform: uppercase;
}
body .bx-filter-input-checkbox {
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
body .bx-filter-input-checkbox input, body .bx-filter-title {
display: none;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
span.bx-filter-param-text {
display: block;
text-align: left;
position: relative;
}
span.bx-filter-param-text:before {
display: inline-block;
width: 17px;
height: 17px;
cursor: pointer;
background: url(http://test.gold-999.ru/bitrix/templates/eshop_bootstrap_blue/images/checkbox.png) no-repeat;
content: '';
left: -22px;
top: -4px;
position: absolute;
}
input[type="checkbox"]:checked + span.bx-filter-param-text:before {
background-position: 0 -15px;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var check = $(".bx-filter-parameters-box-container input:checkbox");
$(".bx-filter-parameters-box-container").change(function() {
var clone = $.map(check.filter(":checked"), function(el) {
return $(el).next().clone().on("click", function() {
$(el).trigger("click")
})
});
$(".hot").html(clone)
})
}); </script>
</head>
<body>
<div class="hot"></div>
<div class="bx-filter-parameters-box-container">
<div class="checkbox">
<label data-role="label_arrFilter_46_471508825" class="bx-filter-param-label " for="arrFilter_46_471508825">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_471508825" id="arrFilter_46_471508825" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН (<span data-role="count_arrFilter_46_471508825">6</span>)</span>
</span>
</label>
</div>
<div class="checkbox">
<label data-role="label_arrFilter_46_231625436" class="bx-filter-param-label " for="arrFilter_46_231625436">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_231625436" id="arrFilter_46_231625436" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН (<span data-role="count_arrFilter_46_231625436">1</span>)</span>
</span>
</label>
</div>
</div>
</body>
</html>
Последний раз редактировалось рони, 14.02.2017 в 13:14.
|
|
14.02.2017, 12:45
|
|
Аспирант
|
|
Регистрация: 12.01.2017
Сообщений: 48
|
|
|
Сообщение от рони
|
пас, но вариант для медитации
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.bx-filter-parameters-box-container .checkbox:first-child {
margin-top: 0;
}
.radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: bold;
}
body .bx-filter-input-checkbox {
font-family: 'Roboto-Regular';
font-size: 11px;
text-transform: uppercase;
}
body .bx-filter-input-checkbox {
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
position: absolute;
margin-top: 4px \9;
margin-left: -20px;
}
body .bx-filter-input-checkbox input, body .bx-filter-title {
display: none;
}
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
span.bx-filter-param-text {
display: block;
text-align: left;
position: relative;
}
span.bx-filter-param-text:before {
display: inline-block;
width: 17px;
height: 17px;
cursor: pointer;
background: url(http://test.gold-999.ru/bitrix/templates/eshop_bootstrap_blue/images/checkbox.png) no-repeat;
content: '';
left: -22px;
top: -4px;
position: absolute;
}
input[type="checkbox"]:checked + span.bx-filter-param-text:before {
background-position: 0 -15px;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var check = $('.bx-filter-parameters-box-container input:checkbox')
$('.bx-filter-parameters-box-container').change(function() {
$('.hot').html(check.filter(':checked').next().clone())
})
});
</script>
</head>
<body>
<div class="hot"></div>
<div class="bx-filter-parameters-box-container">
<div class="checkbox">
<label data-role="label_arrFilter_46_471508825" class="bx-filter-param-label " for="arrFilter_46_471508825">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_471508825" id="arrFilter_46_471508825" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН (<span data-role="count_arrFilter_46_471508825">6</span>)</span>
</span>
</label>
</div>
<div class="checkbox">
<label data-role="label_arrFilter_46_231625436" class="bx-filter-param-label " for="arrFilter_46_231625436">
<span class="bx-filter-input-checkbox">
<input type="checkbox" value="Y" name="arrFilter_46_231625436" id="arrFilter_46_231625436" onclick="smartFilter.click(this)">
<span class="bx-filter-param-text" title="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН (<span data-role="count_arrFilter_46_231625436">1</span>)</span>
</span>
</label>
</div>
</div>
</body>
</html>
|
а чем мой вариант плох?и как еще можно сделать по вашему примеру чтобы при нажатии в том блоке на выведеные пункты они отменялись?ну как у меня в примере
|
|
14.02.2017, 12:57
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
INSIDER73,
не надо копировать ответ целиком, оценить ваш вариант не могу или чтото посоветовать, потому что не осилил.
|
|
14.02.2017, 13:01
|
|
Аспирант
|
|
Регистрация: 12.01.2017
Сообщений: 48
|
|
|
Сообщение от рони
|
INSIDER73,
не надо копировать ответ целиком, оценить ваш вариант не могу или чтото посоветовать, потому что не осилил.
|
ну а как можно сделать чтобы отменялся выбор чекбокса в фильтре при нажатии на выведенное свойство в блоке hot? |
|
|
|
