За последние 24 часа нас посетили 19653 программиста и 1604 робота. Сейчас ищет 1791 программист ...

при фокусе input добавить класс прямому родителю DIV #JQuery

Тема в разделе "JavaScript и AJAX", создана пользователем TeslaFeo, 9 апр 2016.

  1. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Приветствую, уважаемые форумчане!

    прошу подсказать, как при фокусе input type='text' добавить класс прямому родителю DIV и только ему.
    т. е. есть еще несколько блоков DIV с вложенными input type='text'. но они должны остаться неизменными.

    Заранее благодарю...
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    через parent можно попробовать, есть пример html кода и что куда добавить?
     
  3. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Код (Text):
    1. <div data-title='блаблабла'><input type='text' /></div>
    2. <div data-title='блаблабла'><input type='text' /></div>
    3. <div data-title='блаблабла'><input type='text' /></div>
    4.  
    5. .help:after {
    6.  
    7. //правила
    8.  
    9. }
    если будет удобнее, дивам можно добавить - DIV-ам можно прописать класс, для удобства обращения.

    .help:focus:after - (разумеется, класс в этом случае прописываем для input а не для div) к сожалению не работает. hover работает,но нужен focus...
    --- Добавлено ---
    решаю задачу пошагово.


    Код (Text):
    1. HTML
    2.  
    3. <div><input type='text' class='FcsInp' /></div>
    4. <div><input type='text' class='FcsInp' /></div>
    5. <div><input type='text' class='FcsInp' /></div>
    6.  
    7. JQuery
    8.  
    9. $('.FcsInp').focus(function(){
    10.  
    11. $('.FcsInp').parent().addClass('tit');
    12.  
    13. });
    этот вариант добавляет класс всем родительским DIV при фокусе любого инпут. Как сделать добавление класса родительскому диву только того инпута, который получил фокус?

    заранее благодарю
     
  4. mahmuzar

    mahmuzar Старожил

    С нами с:
    6 апр 2012
    Сообщения:
    4.631
    Симпатии:
    425
    Адрес:
    РД, г. Махачкала.
    HTML:
    1. <div><input type='text' class='FcsInp' /></div>
    2. <div><input type='text' class='FcsInp' /></div>
    3. <div><input type='text' class='FcsInp' /></div>
    4.  
    5.  
    --- Добавлено ---
    Код (Javascript):
    1. <script>
    2.     el = document.getElementsByClassName('FcsInp');
    3.     //console.log(el);
    4.     //первое поле
    5.     el[0].onfocus = function () {
    6.         el[0].parentElement.className = 'firstInput';
    7.     };
    8.     el[1].onfocus = function () {
    9.         el[1].parentElement.className = 'secondInput';
    10.     };
    11.     //и. т. д
    12. </script>
     
  5. p@R@dox 55RU

    p@R@dox 55RU Зэк
    [ БАН ]

    С нами с:
    21 май 2014
    Сообщения:
    1.358
    Симпатии:
    7
    Адрес:
    с планеты Ялмез
    естессссна... ты же потом обращаещся ко всем - $('.FcsInp').

    Правильнее будет так:

    $('.FcsInp').focus(function(){
    $(this).parent().addClass('tit');
    });


    (((:)
     
  6. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    я это понимаю. я же написал "решаю задачу пошагово. За решение спасибо. буду пробовать :)
    --- Добавлено ---
    спасибо. работает :)

    полное решение выглядит так если кому то понадобится :)

    Код (Text):
    1. $('.FcsInp').focus(function(){
    2.  
    3. $(this).parent().addClass('tit');
    4.  
    5. });
    6.  
    7. $('.FcsInp').blur(function(){
    8.  
    9. $(this).parent().removeClass('tit');
    10.  
    11. });
     
    denis01 нравится это.
  7. Deonis

    Deonis Старожил

    С нами с:
    15 фев 2013
    Сообщения:
    1.521
    Симпатии:
    504
    Полное решение может выглядеть покомпактней:
    Код (Javascript):
    1. $('.FcsInp').on('focus blur', function(e){
    2.    $(this).parent()[e.type === 'focus' ? 'addClass' : 'removeClass']('tit');
    3. });
     
    TeslaFeo нравится это.