Изменение 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, но не чувствительный к регистру?

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@Анар 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