Question

Доброго времени, друзья!

Может кто разбирается в JavaScript, подскажите, пожалуйста! Это должно быть очень легко, но я не знаю этот язык))

Есть функция 

$('body').on('click', 'td[id^=color] td', function()
{
obj = $(this).parent().parent().parent().parent();
id = obj.data('id');
name = $('div:eq(0)', this).data('val');
val = '';

$('div', obj).parent().css('color','rgb(33,33,33)');
$(this).css('color', 'rgb(94, 198, 249)');
$('#id-' + id + '-oval-2 option').each(function()
{
if($(this).text() == name)
val = $(this).val()
});

$('#id-' + id + '-oval-2').val(val).trigger('change');
});

и мне в ней нужно добавить стиль вот к этому объекту 

$(this).css('color', 'rgb(94, 198, 249)');

А именно нужно убрать нижнюю границу (т.е. добавить css свойство border-bottom:0;).

Буду очень благодарен за любую помощь!

Answer 1

$('body').on('click', 'td[id^=color] td', function()
{
obj = $(this).parent().parent().parent().parent();
id = obj.data('id');
name = $('div:eq(0)', this).data('val');
val = '';

$('div', obj).parent().css('color','rgb(33,33,33)');
$(this).css({"color":"rgb(94, 198, 249)", "border-bottom":"0"});
$('#id-' + id + '-oval-2 option').each(function()
{
if($(this).text() == name)
val = $(this).val()
});

$('#id-' + id + '-oval-2').val(val).trigger('change');
});

Comments

Спасибо большое! Это действительно работает! Но мне не помогло, потому что я неправильно задал вопрос. Как оказалось, я заблуждался на счет объекта, к которому хочу применить свойство.

Опишу вопрос заново, вдруг кто поможет, как я понял, решением будет создать еще один объект или типа того, но как реализовать не знаю, а парень, у которого я заказывал скрипт, не отвечает уже, давно было дело.

В общем выкладываю весь скрипт (кстати, скрипт для вывода цвета товара в карточке товара через доп. поле, может кому будет полезен):

Есть функция, код которой я уже указал в свем изначальном вопросе. Она находится в разделе "каталог товаров" модуля интернет-магазина. А вот вывод этой функции в разделе "вид товара в каталоге": 

 colors =
 {
 'горчичный': '#897655'
 ,'коричневый': '#7c6a60'
 ,'красный': '#91594c'
 ,'черный': '#5c5753'
 ,'серый': '#817869'
 ,'оранжевый': '#a85b3f'
 ,'желтый': '#c09358'
 ,'синий': '#7c98a8'
 ,'зеленый': '#8c9270'
 ,'color-mix': 'url(/img/color-mix.png) no-repeat; background-size:cover'
 ,'белый': '#fff'
 };

 result = $.parseJSON('$OTHER6$');

 price = '$PRICE$'.split('>')[1].split('р')[0];

 var c = [];
 var n = [];
 var td2 = [];
 var tr2 = '';

 for(i in result)
 {
 cur_price = parseFloat(price) + parseFloat(result[i]);

if(typeof(window.max_price) === 'undefined' || window.max_price < cur_price)
{
 window.max_price = cur_price;

 if(typeof(window.slider) !== 'undefined')
 {
 window.slider.update({max: window.max_price});
 }
}

 if((typeof(window.slider) !== 'undefined' && cur_price <= window.old_to) || (typeof(window.old_to) === 'undefined' || window.old_to == ''))
 {
 c.push(colors[i]);
 n.push(i);
 }
 }

 for(i = 1; i <= 4; i++)
 {
 for(j = 3; j > 0; j--)
 {
 if(typeof(c[i * 3 - j]) !== 'undefined')
 {
 td2[i - 1] = '<td class="item-color"><div class="item-color-squares" style="background: ' + c[i * 3 - j] + ';" data-val="' + n[i * 3 - j] + '" title="' + n[i * 3 - j] + '"></div><div class="item-color-p">' + n[i * 3 - j] + '</div></td>' + (typeof(td2[i - 1]) === 'undefined' ? '' : td2[i - 1]);
 }
 }
 }

 j = 0;

 for(i in td2)
 {
 j++;

 tr2 += '<tr>' + td2[i];

 tr2 += '</tr>';
 }

$('#color$ID$').html('<table>' + tr2 + '</table>');

Класс этого дива задает border-bottom (чтобы обозначить, что сюда можно нажимать) названия цвета:

<div class="item-color-p">' + n[i * 3 - j] + '</div>

А я пытаюсь сделать, чтобы этот бордер боттом убирался, если элемент активен.

Адрес раздела сайта: http://wzch.ru/shop/paving-tiles

Вот это я пытаюсь убрать: http://joxi.ru/jgmv8kNUng1JAa

Если вдруг кто поможет буду бесконечно благодарен!!!

---

Антон Чагин,

используй просто css без js

---

Вовчик,

Я и использую, но через css без js не задашь стиль для элемента, который активен в данный момент. Через css можно задать свойства для статичного объекта или свойства :hover, но активный элемент можно указать только через скрипт, отсюда и вопрос.

---

Антон Чагин,

http://htmlbook.ru/css/active

---

Вовчик,

Спасибо, конечно, но я знаком с css, псевдокласс :active определяет стиль ссылки лишь В МОМЕНТ НАЖАТИЯ на нее =)) Я же пытаюсь выделить именно АКТИВНЫЙ элемент, т.е. если пользователь выбрал цвет "серый", название цвета подсвечивается (это задано в скрипте, я писал выше), потому что в данный момент ссылка активна. Но вот убрать нижнюю границу так не получается, потому что такой объект как название цвета (т.е. блок div с классом item-color-p, о котором я писал выше) не задан в скрипте как отдельный объект (извините, если ненаучно выражаюсь). А я пытаюсь именно это и сделать)))

---

Антон Чагин,

дай ссылку на страницу, посмотрю на живом примере, может что выйдет

---

Вовчик,

Адрес раздела сайта: http://wzch.ru/shop/paving-tiles

---

Антон Чагин,

хз честно говоря)) попробуй так если  правильно понял:

<script>
$('body').on('click', 'td[id^=color] td', function()
{
obj = $(this).parent().parent().parent().parent();
id = obj.data('id');
name = $('div:eq(0)', this).data('val');
val = '';

$('div', obj).parent().css('color','rgb(33,33,33)');
$(this, obj).children().css({"color":"rgb(94, 198, 249)", "border-bottom":"0px !important"});
$('#id-' + id + '-oval-2 option').each(function()
{
if($(this).text() == name)
val = $(this).val()
});

$('#id-' + id + '-oval-2').val(val).trigger('change');
});
</script>

---

Вовчик,

К сожалению, не работает, но я Вам очень благодарен за помощь в любом случае! Спасибо, что отозвались на просьбу!