Изменение display при изменении value у input

@Анар · Регистрация: 12.09.2015

Студворк — интернет-сервис помощи студентам

Всем привет, есть примерное следующий код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div data-uniqid="56f685a07f57a5.13112283" data-logic="" data-haslogic="" class="cpf_hide_element cell col-12 cpf-type-range">
  <label class="tm-epo-field-label">Моцарелла</label>
  <div class="tm-extra-product-options-container">
    <ul data-rules="[[&quot;90&quot;]]" data-rulestype="[[&quot;step&quot;]]" data-tm-validation="{&quot;max&quot;:3}" class="tmcp-ul-wrap tmcp-elements tm-extra-product-options-range tm-element-ul-range element_3">
      <li class="tmcp-field-wrap">
        <div class="tm-range-picker noUi-target noUi-ltr noUi-horizontal noUi-connect" data-min="0" data-max="3" data-step="1" data-pips="" data-show-picker-value="" data-field-id="tmcp_range_9" data-start="">
          <div class="noUi-base">
            <div class="noUi-origin noUi-background" style="left: 0%;">
              <div class="noUi-handle noUi-handle-lower" title=""></div>
            </div>
          </div>
        </div>
        <label class="tm-show-picker-value" for="tmcp_range_9"></label>
        <input class="tmcp-field tm-epo-field tmcp-textfield tmcp-range" name="tmcp_range_3" data-price="" data-rules="[[&quot;90&quot;]]" data-rulestype="[[&quot;step&quot;]]" value="0" id="tmcp_range_9" tabindex="9" type="hidden">
        <span class="amount  hidden">0&nbsp;</span>
      </li>
    </ul>
  </div>
</div>
//...
<img id="someid" src="image.png" style="display:none">

Это ползунок, т.е. пользователь просто перетягивает ползунок и у input меняется значение value от 0 до 3. Нужно как-то сделать, чтобы при значении value отличном от 0 менялось значение display (с none на block) у изображения.
И ещё вопрос, можно ли считывать значение у input находя его не по его id а по содержимому первого label (там где моцарелла)?

@AmateR62 · 28.03.2016, 20:26

А где сам скрипт? На такую постановку вопроса можно ответить так: когда в скрипте пишется значение в input меняем стиль изображения:

JavaScript
1
$('#someid').css('display', 'none');

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

можно ли считывать значение у input находя его не по его id а по содержимому первого label

JavaScript
1
var a = $('.tm-epo-field-label').next('div').find('input').val();

@Анар · 28.03.2016, 23:01 **[ТС]**

AmateR62, скрипты где-то в директории плагина, прикреплю к сообщению. Работают эти ползунки на noUi.

Принцип работы я отдалёно понял. Считывать value у input не получается, т.к. он не меняется, из-за noUi. При движении ползунка меняется значение title у div'а на 9й строке и цена в спане на 15. Вопрос в следующем, как через них можно менять значение display?
У самого до js руки так и не дошли, его я не понимаю вообще, накалялкал примерно следующее:

JavaScript
1
2
3
4
5
6
7
8
jQuery(document).ready(function($){
    $(".noUi-handle").change(function(){
    var value = $('[name="Моцарелла"]').next('div').find(".noUi-handle").attr('title');
    if(value > 0) {
    alert(value);
}
});
});

Что естественно не работает...

@AmateR62 · 29.03.2016, 08:39

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

Работают эти ползунки на noUi

Так у слайдера есть события (почитать), надо привязываться к ним, а не к значениям в title какого то input.

JavaScript
1
2
3
slider.noUiSlider.on('update', function(){
  /* код изменения видимости */
});

У вас на какой элемент слайдер вешается?

@Анар · 29.03.2016, 14:06 **[ТС]**

AmateR62, если бы я знал как это сделать...
Ну видимо на input вешается.

Если поможет, то вот ссылка на страницу.

@AmateR62 · 29.03.2016, 14:30

Анар, а где он у вас инициализируется в коде? Или он как вордпрессовский плагин подключен?

@Анар · 30.03.2016, 02:05 **[ТС]**

AmateR62, как WP-плагин.

Добавлено через 11 часов 8 минут
AmateR62, в общем немного переделал. Отправлю в ад ползунки и сделаю через чекбоксы, как у соусов. Сделал примерно вот так:

JavaScript
1
2
3
4
5
6
7
8
9
jQuery(document).ready(function($){
    var elem = $('label:contains("Томатный")').prev('input');
    elem.change(function(){
    var value = elem.prop("checked");
    if(value == true){
        alert('...');
    }
});
});

Вроде работает. Но вот проблема, т.к. цены на одни и те же ингредиенты при разных диаметрах разные, то плагином этот момент можно сделать только через условную логику, т.е. всех элементов на странице по два. При диаметре 30см одни на странице отображаются другие помечены display:none, соответственно при смене диаметра всё меняется.
Код работает при нажатии на "Томатный" при 30см, но если поменять диаметр, то при нажатии на "Томатный" (уже 2й) ничего не происходит. Я примерно понимаю, что это, скорее всего, из-за того, что prop() берёт значение только у первого, но функции map(), each() я не понял. Можете подсказать, как правильно это написать?

И ещё вопрос, есть ли аналог :contains, но не чувствительный к регистру?

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@Анар 225 / 216 / 89 Регистрация: 12.09.2015 Сообщений: 986
	29.03.2016, 14:06 [ТС]
	AmateR62, если бы я знал как это сделать... Ну видимо на input вешается. Если поможет, то вот ссылка на страницу. 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	29.03.2016, 14:30
	Анар, а где он у вас инициализируется в коде? Или он как вордпрессовский плагин подключен? 0

Опции темы