Помогите менять 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");
});
но что-то не вышло. Я еще полный нуб в этих всех делах, вот что смог то и нашел/изучил/сделал, подскажите как быть? |
landerorly,
попробуйте локализовать проблему иначе много текста неосилить |
действительно много текста.
но если стоит задача просто добавить еще один класс, то вон в строке 60
s.addClass("pb_incompatible");
добавь еще строчку s.addClass("someClass"); |
за кучу текста извиняюсь, но не знаю как описать короче.
Для scruwi: если сделать как вы написали, класс будет меняться у <label>-а, а надо чтоб он менялся у "родителя его родителя", как-то так. |
вопчем решение нашел, после строк 61 и 72 javascript-a вставил
jQuery(".pb_incompatible").closest(".group").addClass("moe_del");
и
jQuery(".pb_compat").closest(".group").removeClass("moe_del");
соответственно. |
| Часовой пояс GMT +3, время: 15:35. |