Форум

INSIDER73 · #1 (**permalink**) 14.02.2017, 11:06

Вырезал кусок кода,проблема в том что не меняется положение background-position,при клике на чекбокс,для класса bx-filter-input-checkbox для картинки задается background-position: 0px -19px; ,а обнулять не хочет при еще одном клике,там еще какой то непонятный js,прошу объяснить что не так)

https://jsfiddle.net/ygvsw4k6/

INSIDER73 · #2 (**permalink**) 14.02.2017, 11:20

Сам фильтр работает правильно,не меняется только положение для картинки ,вот сам сайт test.gold-999.ru/catalog/rings

рони · #3 (**permalink**) 14.02.2017, 11:47

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="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН&nbsp;(<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="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН&nbsp;(<span data-role="count_arrFilter_46_231625436">1</span>)</span>
   </span>
    </label>
 </div>
</div>

</body>
</html>

INSIDER73 · #4 (**permalink**) 14.02.2017, 12:06

Сообщение от рони

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="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН&nbsp;(<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="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН&nbsp;(<span data-role="count_arrFilter_46_231625436">1</span>)</span>
   </span>
    </label>
 </div>
</div>

</body>
</html>

ого спасибо,а можно еще сделать так чтобы когда выбираешь фильтр,он выносился в отдельный блок,типо у нас же может быть много свойств у фильтра,а отмеченые выводятся в отдельный блок?

рони · #5 (**permalink**) 14.02.2017, 12:18

INSIDER73,
кодировать надо, css тут уже не поможет

INSIDER73 · #6 (**permalink**) 14.02.2017, 12:28

Сообщение от рони

INSIDER73,
кодировать надо, css тут уже не поможет

а если вот так http://codepen.io/aliencash/pen/XpoGPa

рони · #7 (**permalink**) 14.02.2017, 12:40

Сообщение от 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="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН&nbsp;(<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="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН&nbsp;(<span data-role="count_arrFilter_46_231625436">1</span>)</span>
   </span>
    </label>
 </div>
</div>

</body>
</html>

INSIDER73 · #8 (**permalink**) 14.02.2017, 12:45

Сообщение от рони

пас, но вариант для медитации

<!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="ДЛЯ ЖЕНЩИН">ДЛЯ ЖЕНЩИН&nbsp;(<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="ДЛЯ МУЖЧИН">ДЛЯ МУЖЧИН&nbsp;(<span data-role="count_arrFilter_46_231625436">1</span>)</span>
   </span>
    </label>
 </div>
</div>

</body>
</html>

а чем мой вариант плох?и как еще можно сделать по вашему примеру чтобы при нажатии в том блоке на выведеные пункты они отменялись?ну как у меня в примере

рони · #9 (**permalink**) 14.02.2017, 12:57

INSIDER73,
не надо копировать ответ целиком, оценить ваш вариант не могу или чтото посоветовать, потому что не осилил.

INSIDER73 · #10 (**permalink**) 14.02.2017, 13:01

Сообщение от рони

INSIDER73,
не надо копировать ответ целиком, оценить ваш вариант не могу или чтото посоветовать, потому что не осилил.

ну а как можно сделать чтобы отменялся выбор чекбокса в фильтре при нажатии на выведенное свойство в блоке hot?

Форум

Справочник

Discord чат

Курсы javascript