Связка событий hover и click

@atrophy · Регистрация: 08.06.2018

Студворк — интернет-сервис помощи студентам

День добрый. Помогите решить сию задачку. Есть две формы с радио кнопками и по текстовому полю над каждой из них. Нужно чтобы при ховере на радиокнопку текст из лейбла кнопки (class="value-name") переносился в текстовой поле над формой (class="newtext") и соответственно пропадал при уводе мыши с радиокнопки, а при клике он там оставался, но при движении по другим кнопкам появлялся текст из лейблов тех кнопок и при уводе мыши оставался текст выбранной кнопки. Надеюсь понятно объяснил, извиняюсь за свою терминологию)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="product">
<div class="form-group required  radio-colors">
  <label class="control-label">Цвет<span class="newtext">: </span></label>
  <div id="input-option228">
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="50" autocomplete="off">
        <span class="value-name">желтый</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="52" autocomplete="off">
        <span class="value-name">черный</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="22" autocomplete="off">
        <span class="value-name">темно-синий</span>
      </label>
    </div>
 
  </div>
</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
        var
    $product = $('#product'),
    $radio = $product.find('.radio');
 
    $radio.on('click',function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ' + $radioText);
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    }).hover(function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ' + $radioText);
    }, function(){
        var
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ');
    });

В моем коде текст из '.newtext' всегда пропадает при уводе мыши, даже если сделан выбор.

@Mr_Nerub · 08.06.2018, 09:05

Создай переменную за границей $radio.on(), добавь в нее значение при клике на radio, и после этого в функциях hover() при уводе мыши добавляй сохраненное значение переменной в $uplineText.
Что-то вроде:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var 
    $product = $('#product'),
    $radio = $product.find('.radio'),
    $selected = '';                        //та самая переменная
 
    $radio.on('click',function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $selected = $uplineText.text();                  //присваиваем значение переменной
 
        $uplineText.text(': ' + $radioText);
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    }).hover(function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ' + $radioText);
    }, function(){
        var
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ' + $selected);                //возвращаем значение
    });

По идее, должно сработать.

@atrophy · 08.06.2018, 09:25 **[ТС]**

Mr_Nerub, благодарю, сделал и все заработало!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var
    $product = $('#product'),
    $radio = $product.find('.radio'),
    $radioSelected = $product.find('.radio.selected'),
    $selectedText = $radioSelected.children('label').text();
 
    $radio.on('click',function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $selectedText = $uplineText.text();
        $uplineText.text(': ' + $radioText);
        $(this).siblings().removeClass('selected');
        $(this).addClass('selected');
    }).hover(function(){
        var
        $radioText = $(this).children('label').text(),
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text(': ' + $radioText);
    }, function(){
        var
        $uplineText = $(this).closest('.form-group').find('.newtext');
 
        $uplineText.text($selectedText);
    });

Еще вопрос, смущает меня громоздкость кода, может как-то компактнее это можно прописать?

@Mr_Nerub · 08.06.2018, 09:42

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

может как-то компактнее это можно прописать?

Повторяющиеся элементы можно в функции занести и каждый раз вызывать нужную функцию. Как минимум, тут дважды прописывается одно и то же в случае с $radioText и $uplineText.

@atrophy · 08.06.2018, 18:24 **[ТС]**

Блин, с двумя формами это работает не совсем правильно. Пока ховер происходит на каждой форме отдельно все хорошо. Но когда они пересекаются (то есть ховер на второй форме после первой например) то так как $selectedText общая переменная то во второй форме в $uplineText появляется текст из первой формы. Не могу сообразить как это разрешить? Прописывать отдельные переменные по классам для каждой формы? сдается мне что есть какое-то решение попроще.

@Mr_Nerub · 08.06.2018, 18:48

Можно попробовать заменить

JavaScript
1
$(this).closest('.form-group').find('.newtext')

на

JavaScript
1
$(this).closest('.control-label').find('.newtext').

И в каждой из форм сделать свой <label class="control-label">Цвет<span class="newtext">: </span></label>
Мне просто непонятно, как именно у тебя эти 2 формы выражены в html.

@atrophy · 08.06.2018, 19:28 **[ТС]**

там код второй формы аналогичный, только "form-group required" имеют разные классы - у первой "form-group required radio-sizes", у второй "form-group required radio-colors". Это опенкарт, radio-colors и radio-sizes классы при загрузке через jquery добавил

Добавлено через 8 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<div id="product">
 
<div class="form-group required  radio-sizes">
  <label class="control-label">Цвет<span class="newtext">: </span></label>
  <div id="input-option227">
 
    <div class="radio">
      <label>
        <input type="radio" name="option[227]" value="17" autocomplete="off">
        <span class="value-name">XS</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[227]" value="18" autocomplete="off">
        <span class="value-name">S</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[227]" value="19" autocomplete="off">
        <span class="value-name">M</span>
      </label>
    </div>
 
  </div>
</div>
 
<div class="form-group required  radio-colors">
  <label class="control-label">Цвет<span class="newtext">: </span></label>
  <div id="input-option228">
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="50" autocomplete="off">
        <span class="value-name">желтый</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="52" autocomplete="off">
        <span class="value-name">черный</span>
      </label>
    </div>
 
    <div class="radio">
      <label>
        <input type="radio" name="option[228]" value="22" autocomplete="off">
        <span class="value-name">темно-синий</span>
      </label>
    </div>
 
  </div>
</div>
 
</div>

@Mr_Nerub · 08.06.2018, 19:45

atrophy,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var $product = $("#product"),
    $radio = $product.find(".radio"); 
 
var $radioText,$uplineText,$selected = "";
$radio
  .on({
  click: function() {
    $radioText = $(this).children("label").text();
    $uplineText = $(this).closest(".form-group").find(".newtext");
 
   
    $uplineText.text(": " + $radioText);
    $selected = $(this).closest(".form-group").find(".selected").text();
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
  },
  mouseenter :  function() {
    $radioText = $(this).children("label").text();
    $uplineText = $(this).closest(".form-group").find(".newtext");
    
    $selected = $(this).closest(".form-group").find(".selected").text();
 
    $uplineText.text(": " + $radioText);
  },
  mouseleave: function() {
    $uplineText = $(this).closest(".form-group").find(".newtext");
 
    $uplineText.text(": " + $selected);
  }
});

Пробуй вот этот код. У меня работает как надо.

@atrophy · 09.06.2018, 04:56 **[ТС]**

Mr_Nerub, премного благодарен!! Именно то что надо

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@atrophy 0 / 0 / 0 Регистрация: 08.06.2018 Сообщений: 14
	08.06.2018, 18:24 [ТС]
	Блин, с двумя формами это работает не совсем правильно. Пока ховер происходит на каждой форме отдельно все хорошо. Но когда они пересекаются (то есть ховер на второй форме после первой например) то так как $selectedText общая переменная то во второй форме в $uplineText появляется текст из первой формы. Не могу сообразить как это разрешить? Прописывать отдельные переменные по классам для каждой формы? сдается мне что есть какое-то решение попроще. 0

@atrophy 0 / 0 / 0 Регистрация: 08.06.2018 Сообщений: 14
	09.06.2018, 04:56 [ТС]
	Mr_Nerub, премного благодарен!! Именно то что надо 0

Связка событий hover и click

Решение