Javascript-форум - Как проверить, что есть поле селект у товара

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как проверить, что есть поле селект у товара (https://javascript.ru/forum/misc/46120-kak-proverit-chto-est-pole-selekt-u-tovara.html)

borus

29.03.2014 12:46

Как проверить, что есть поле селект у товара

Здравствуйте.

Общими усилиями для страницы написал скрипт abv347.js, который с помощью функции $('.addtocart-button').on('click', function() проверяет, выбрано ли значение из выпадающего списка с типом багета картины. Скрипт хорошо отрабатывает на странице с детальным описанием товара, где может существовать только один выпадающий список с id = baget_select.

Если кликнуть на кнопку добавить в корзину на выше указанной странице категории товаров для товара, у которого нет возможности выбора типа багета, то скрипт сходит с ума, видя другие селекты с id = "baget_select". Как написать условие $('.addtocart-button').on('click', function(), которое бы проверяло, есть ли поле селект с выбором типа багета только у того товара, под которым была нажата кнопка с class="addtocart-button"?

jsnb	29.03.2014 13:58

На странице в принципе не должно быть нескольких элементов с одинаковым id. На то он и идентификатор, чтобы быть уникальным.
Вот костыли для проверки наличия селекта багетов:

var hasBagetSelection = $(this.form).find('#baget_select').length > 0;
if (hasBagetSelection) { alert('есть') } else { alert('нет') };

borus

22.04.2014 16:07

Цитата:

Сообщение от jsnb (Сообщение 304986)

var hasBagetSelection = $(this.form).find('#baget_select').length > 0;
if (hasBagetSelection) { alert('есть') } else { alert('нет') };

благодарю, исправлю, проморгал задвоение id.

Тестирую на локальном сервере. Условие не срабатывает верно. Воспользовался отладчиком Хрома, поставил точку останова на

var hasBagetSelection = $(this.form).find('#baget_select').length > 0;

он указывает, что this на этой строке это span.addtocart-button, видимо поэтому hasBagetSelection всегда = false. Выпадающий список с типом багета находится в другой ветке DOM насколько понимаю, судя по принтскрину:

Как можно добраться и проверить наличие #baget_select в соседней ветке DOM?

ksa	22.04.2014 16:22

Цитата:

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

var hasBagetSelection = $(this.form).find('#baget_select').length > 0;

Зная ИД элемента, ничего искать не нужно... :)
Обращайся сразу

$('#baget_select')

depp	22.04.2014 16:24

используйте вместо #baget_select => .baget_select
к спискам с баггетами добавьте class="baget_select"

borus

22.04.2014 16:52

Цитата:

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

Зная ИД элемента, ничего искать не нужно...

просто на странице несколько таких baget_select и нужно проверить наличие этого поля у того товара, под которым и была нажата кнопка "Добавить в корзину", которая запустила весь этот "триггер"

borus

22.04.2014 17:12

Цитата:

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

используйте вместо #baget_select => .baget_select
к спискам с баггетами добавьте class="baget_select"

а вот это почему-то не сработало...

depp	22.04.2014 17:17

я вкратце объясню, так как не знаю ваш код.
вы вызываете событие

$('.addtocart-button').click(function(){
//внутри есть объект this
$(this).parent().prev(). //по моему такой путь до блока с выбором типа багета
find('.baget_select'); // вот вам ваш объект. далее делаете с ним что хотите.
});

borus

22.04.2014 17:58

Цитата:

Сообщение от depp (Сообщение 308826)

я вкратце объясню, так как не знаю ваш код.
вы вызываете событие

$('.addtocart-button').click(function(){
//внутри есть объект this
$(this).parent().prev(). //по моему такой путь до блока с выбором типа багета
find('.baget_select'); // вот вам ваш объект. далее делаете с ним что хотите.
});

то, что надо, спасибо.
А как определить у элемента, нажатие по которому было совершено и функция для которого сейчас выполняется, наличие/отсутствие класса с определённым именем?

depp	22.04.2014 18:00

$('element').click(function(){
    $(this).hasClass('class_name'); // true, если есть, false - если нет
});

ksa	23.04.2014 08:50

Цитата:

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

просто на странице несколько таких baget_select

Такого не должно быть. ИД уникально на странице...

borus

23.04.2014 14:02

Цитата:

Сообщение от depp (Сообщение 308826)

$(this).parent().prev(). //по моему такой путь до блока с выбором типа багета

попытался использовать эту часть предложенного вами решения в цикле, чтобы проверить тексты селектов. Почему-то всегда этот код

var elements = $('span.addtocart-button');
		for(var i=0; i<elements.length; i++) {
			var selection = $(elements[i]).parent().prev().find('#baget_select');//выбираю в соседней ветке DOM структуры select с #baget_select
			if (selection.length > 0 ){
				if(selection.text()=='Выберите багет'){
					alert('отключить эту кнопку!');
				} else {
					alert('оставить эту кнопку!');
				}
			}
		}

проходит по ветке else условного оператора, а сам alert(selection.text()) выводит текст вида "Выберите багет┘темныйсветлый"
где под ┘ я имею в виду перевод на новую строку.
а вот html-код того, что по идее отлавливается в selection:

Код:

<select name="customPrice[0][10]" required="" id="baget_select">

         <option disabled="">Выберите багет</option>

         <option value="5788">темный</option>

         <option value="5789">светлый</option>                                                  

</select>

Как же проверить, какое значение стоит в select'ах, просматриваемых в цикле?

depp	23.04.2014 22:14

я сейчас толком не вдавался в ваш код. но судя по тому что я увидел вы по прежнему используете множество одинаковых id на странице. id - это уникальный идентификатор элемента на странице. не может быть двух одинаковых id. иначе пропадает уникальность. используйте class.

далее для цикла есть хороший оператор each. используейте его.

$( ".baget_select" ).each(function() {
    $( this ).length // вот длина вашего объекта. не знаю что вы с ней делаете дальше...
});

Часовой пояс GMT +3, время: 10:31.