Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2015, 18:11
Интересующийся
Отправить личное сообщение для landerorly Посмотреть профиль Найти все сообщения от landerorly
 
Регистрация: 05.05.2014
Сообщений: 23

Помогите менять class динамически
Доброго времени суток. Помогите с такой проблемкой. Есть примерно такой HTML:
<form action="index.php" method="post" name="groupForm0">
<div id="group_wrap_0" class="group">
<div class="group_details">
<div>
<ul id="groupsel_0" class="groupSelect">
<li>
<input type="radio" name="0product_id[]" value="17" class="676f746f766979206f747469736b" id="id0_17" onclick="productbuilder.update(this.value,0);">
<label for="id0_17" class="676f746f766979206f747469736b " id="lbl_id0_17">Продукт 1</label>
</li>
<li>
<input type="radio" name="0product_id[]" value="18" class="73766f79206f747469736b" id="id0_18" onclick="productbuilder.update(this.value,0);">
<label for="id0_18" class="73766f79206f747469736b pb_selectedProduct" id="lbl_id0_18">Продукт 2</label>
</li>
</ul>
</div></div></div>
</form>
<form action="index.php" method="post" name="groupForm1">
<div id="group_wrap_1" class="group">
<div class="group_details">
<div>
<ul id="groupsel_1" class="groupSelect">
<li>
<input type="radio" name="1product_id[]" value="1" class="676f746f766979206f747469736b pb_incompatible" id="id1_1" onclick="productbuilder.update(this.value,1);">
<label for="id1_1" class="676f746f766979206f747469736b pb_incompatible" id="lbl_id1_1">Продукт 3</label>
</li>
</ul>
</div></div></div>
</form>
<form action="index.php" method="post" name="groupForm2">
<div id="group_wrap_2" class="group">
<div class="group_details">
<div>
<ul id="groupsel_2" class="groupSelect">
<li class="moe_product moe_product_19">
<input type="radio" name="2product_id[]" value="19" class="73766f79206f747469736b pb_compat" id="id2_19" onclick="productbuilder.update(this.value,2);">
<label for="id2_19" class="73766f79206f747469736b pb_compat" id="lbl_id2_19">Продукт 4</label>
</li>
<li class="moe_product moe_product_24">
<input type="radio" name="2product_id[]" value="24" class="73766f79206f747469736b pb_compat" id="id2_24" onclick="productbuilder.update(this.value,2);">
<label for="id2_24" class="73766f79206f747469736b pb_compat" id="lbl_id2_24">Продукт 5</label>
</li>
</ul>
</div></div></div>
</form>...
<form action="index.php" method="post" name="groupFormN">
<div id="group_wrap_N" class="group">
<div class="group_details">
<div>
<ul id="groupsel_N" class="groupSelect">
<li>
<input type="radio" name="Nproduct_id[]" value="X" class="525f746f766979206f747469736b pb_incompatible" id="idN_X" onclick="productbuilder.update(this.value,N);">
<label for="idN_X" class="525f746f766979206f747469736b pb_incompatible" id="lbl_idN_X">Продукт N</label>
</li>
</ul>
</div></div></div>
</form>


Вся эта "механизма" дает возможность собирать товар в магазине как конструктор из разных частей (каждая <form></form> часть общего товара). Тут реализована система зависимостей: выбрал Продукт 1 тогда тебе не доступны продукты из groupForm2, и наоборот, выбрал Продукт 2 (как в примере выше, видно по class-у label-а "pb_selectedProduct") тогда тебе не доступны продукты из groupForm1 (видно по class-у label-а "pb_incompatible"), а продукты из groupForm2 стали наоборот видны (class label-а меняется на " pb_compat") и т.д.
Классы эти меняются через javascript:

compatOption: function() {
						if(productbuilder.disp_compat)var e = document.id("compatibility_btn").checked;
                        else var e = productbuilder.compat_chck;
                        selectt_tags = $$(".groupSelect");
                        options = new Array;
                        for(j = 0; j<selectt_tags.length; j++) {
								if(selectt_tags[j].get("tag")=="input"||selectt_tags[j].get("tag")=="ul")var t = "input";
                                else var t = "option";
                                if(selectt_tags[j].get("type")=="hidden")var r = new Array;
                                else var r = selectt_tags[j].getElements(t);
                                if(options.length==0||typeof options=="undefined")options = r;
                                else options = options.concat(r)
						}
						if(!e) {
								for(i = 0; i<options.length; i++) {
										var s = options[i].get("tag");
                                        if(s=="input") {
												if(options[i].disabled) {
														options[i].removeProperty("disabled");
                                                        g_id = options[i].id;
                                                        gr_id = "lbl_"+g_id;
                                                        document.id(gr_id).removeClass("pb_incompatible");
                                                        document.id(gr_id).addClass("pb_compat");
												}
										}
										else {
												options[i].removeProperty("disabled");
                                                options[i].removeClass("pb_incompatible");
                                                options[i].addClass("pb_compat");
										}
								}
						}
						else {
								for(n = 0; n<options.length; n++) {
										if((options[n].checked||options[n].selected||options[n].get("type")=="hidden")&&options[n].value>0) {
												pr_grp_id = options[n].id;
                                                order_id = pr_grp_id.substr(2, pr_grp_id.indexOf("_")-2);
                                                prd_id = pr_grp_id.substr(pr_grp_id.indexOf("_")+1, pr_grp_id.length-2);
                                                productbuilder.checkcompat(prd_id, order_id)
										}
								}
						}
				}
				, checkcompat: function(e, t) {
						if(typeof selectt_tags=="undefined")selectt_tags = $$(".groupSelect");
                        if(typeof sel_option=="undefined")sel_option = document.id("id"+t+"_"+e);
                        if(typeof productbuilder.grtree!="undefined") {
								if(typeof productbuilder.grtree[t]!="undefined") {
										var n = sel_option.getProperty("class");
                                        n = n.replace("groupSelect", "");
                                        if(n&&n!="notag") {
												var r = n.split(" ");
                                                for(x = 0; x<productbuilder.grtree[t].length; x++) {
														for(j = 0; j<productbuilder.tagtree[t].length; j++) {
																for(i = 0; i<r.length; i++) {
																		if(r[i]!=productbuilder.tagtree[t][j]) {
																				clsname = "."+productbuilder.tagtree[t][j];
																				var s = selectt_tags[productbuilder.grtree[t][x]].getElements(clsname);
                                                                                s.setProperty("disabled", "disabled");
                                                                                s.addClass("pb_incompatible");
                                                                                s.removeClass("pb_compat");
																		}
																}
														}
												}
												for(x = 0; x<productbuilder.grtree[t].length; x++) {
														for(i = 0; i<r.length; i++) {
																className = "."+r[i];
                                                                tagedEl = selectt_tags[productbuilder.grtree[t][x]].getElements(className);
                                                                tagedEl.removeProperty("disabled");
                                                                tagedEl.removeClass("pb_incompatible");
                                                                tagedEl.addClass("pb_compat");
														}
												}
												productbuilder.unselectDisabled()
										}
										else if(n&&n=="notag") {
												for(x = 0; x<productbuilder.grtree[t].length; x++) {
														for(j = 0; j<productbuilder.tagtree[t].length; j++) {
																clssname = "."+productbuilder.tagtree[t][j];
                                                                tagdEl = selectt_tags[productbuilder.grtree[t][x]].getElements(clssname);
                                                                tagdEl.removeProperty("disabled");
                                                                tagdEl.removeClass("pb_incompatible");
                                                                tagdEl.addClass("pb_compat");
														}
												}
										}
								}
						}
                        return
				}


Собстно вопрос, как бы сделать так чтобы скрывались и показывались не только <label> товаров, а весь <div class="group_details">. Я хочу сделать это так, когда у label class="pb_incompatible" то к <div class="group_details"> добавляется еще какойнить класс, когда у label class="pb_compat" то к <div class="group_details"> добавляется другой класс, потом через css я их буду скрывать или показывать (хочется именно так, мне это ближе и понятнее, хоть возможно и есть другие пусть даже более простые решения).
Пробовал делать это через jQuery примерно так:

jQuery(document).ready(function (delPustoe) {
   jQuery(".pb_incompatible").parent().parent().parent().parent(".group_details").addClass("moe_del");
});


но что-то не вышло. Я еще полный нуб в этих всех делах, вот что смог то и нашел/изучил/сделал, подскажите как быть?
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2015, 18:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

landerorly,
попробуйте локализовать проблему иначе много текста неосилить
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2015, 19:55
Интересующийся
Отправить личное сообщение для scruwi Посмотреть профиль Найти все сообщения от scruwi
 
Регистрация: 24.11.2014
Сообщений: 13

действительно много текста.
но если стоит задача просто добавить еще один класс, то вон в строке 60
s.addClass("pb_incompatible");

добавь еще строчку s.addClass("someClass");
Ответить с цитированием
  #4 (permalink)  
Старый 09.02.2015, 03:19
Интересующийся
Отправить личное сообщение для landerorly Посмотреть профиль Найти все сообщения от landerorly
 
Регистрация: 05.05.2014
Сообщений: 23

за кучу текста извиняюсь, но не знаю как описать короче.
Для scruwi: если сделать как вы написали, класс будет меняться у <label>-а, а надо чтоб он менялся у "родителя его родителя", как-то так.
Ответить с цитированием
  #5 (permalink)  
Старый 09.02.2015, 06:49
Интересующийся
Отправить личное сообщение для landerorly Посмотреть профиль Найти все сообщения от landerorly
 
Регистрация: 05.05.2014
Сообщений: 23

вопчем решение нашел, после строк 61 и 72 javascript-a вставил
jQuery(".pb_incompatible").closest(".group").addClass("moe_del");
и
jQuery(".pb_compat").closest(".group").removeClass("moe_del");
соответственно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Использование классов в JavaScript devote Ваши сайты и скрипты 70 01.02.2013 17:17
Как работает функция Class godofjavascript Оффтопик 58 17.12.2012 09:49
Сократить кол-во инпут до одного, динамически менять значения тега input Dikkiy jQuery 2 01.05.2012 02:33
Помогите! Многоуровневые вкладки! sergeeeeee Элементы интерфейса 2 02.08.2010 23:50
Помогите динамически интегрировать значение в URL Yurii Общие вопросы Javascript 14 07.05.2008 15:12