Задать значение атрибуту

@Freeslava · Регистрация: 17.10.2015

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

Хелпаните, как поменять значение атрибута у элемента через js, мой вариант не работает почему-то. Атрибут data-service задан у всех radio и в скрипте по сути должен меняться, но чет не так
Разметка

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
 <table border="0" class="calc-options type-class">
 <tr>
 <td class="calc-options__title">
 Выберите Класс вашего автомобиля:
 </td>
 <td>
 <div>
 <table border="0" class="t-size">
 <tr>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="0" data-cost="900" data-size="7" data-class="A" data-service="200" data-image="class_A.png" checked="checked">
 Класс A
 </label>
 </td>
 <td class="delim"></td>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="1" data-cost="1000" data-size="11" data-class="B" data-service="200" data-image="class_B.png">
 Класс B
 </label>
 </td>
 <td class="delim"></td>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="2" data-cost="1100" data-size="14" data-class="C" data-service="200" data-image="class_C.png">
 Класс C
 </label>
 </td>
 <td class="delim"></td>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="3" data-cost="1200" data-size="15" data-class="D" data-service="200" data-image="class_D.png">
 Класс D
 </label>
 </td>
 <td class="delim"></td>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="4" data-cost="1300" data-size="20" data-class="E" data-service="200" data-image="class_E.png">
 Класс E
 </label>
 </td>
 <td class="delim"></td>
 <td class="text-center">
 <label class="radio">
 <input type="radio" name="car-class" value="5" data-cost="1300" data-class="F" data-image="class_F.png">
 Класс F
 </label>
 </td>
 </tr>
 </table>
 
 </div>
 <br>
 </td>
 </tr>
 </table>

Скрипт изменения значения атрибута, но он не работает.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
$("body").change(function () {
       var price = $("input[name='car-service']:checked").val();
           document.getElementById('result').innerHTML = '<div class="result__service"><span style="font-size:22px;!important;">Дополнительные услуги: '+ price +' ₽</span></div>';
            if (price > 0){
                $(this).data("service","200");
                document.getElementById('form-cars-address').style.display = 'block';
                return price;
            }else{
                $(this).data("service","0");
                document.getElementById('form-cars-address').style.display = 'none';
                return price;
            }
 
    });
</script>

@kalabuni · 10.07.2018, 02:46

установить значение атрибуту: Element.setAttribute()
получить значение атрибута: Element.getAttribute()

значение атрибута всегда имеет тип String
т. е. если число 123 пропишете значением атрибута: Element.setAttribute('my-attrib', 123), то метод Element.getAttribute('my-attrib') вернёт строку '123'

самый простой способ преобразовать строковое значение атрибута в числовое это прописать перед ним плюсик, вот так:
+Element.getAttribute('my-attrib'), тогда получите число 123

@Mr_Sergo · 10.07.2018, 07:37

Freeslava,
Создаешь тему в javaScript приводишь код на jQuery, ты уж определись на фреймворке (библиотеке) писать или на нативном...
javaScript:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[...document.getElementsByName('car-class')].map((e)=>
    e.addEventListener('change',()=>{
        var price = +e.getAttribute('data-cost')        // в этой строке укажи data-cost или что там тебе нужно вывести в result
        document.getElementById('result').innerHTML = '<div class="result__service"><span style="font-size:22px;!important;">Дополнительные услуги: '+ price +' в‚Ѕ</span></div>';
        if(price > 0){
            e.setAttribute("service","200")         // и тут вот вообще не понятно: ты что-то устанавливаешь? или ЧТО тут вообще должно происходить?
            document.getElementById('form-cars-address').style.display = 'block'
            return price
        }else{
            e.setAttribute("service","0")           // и тут вот вообще не понятно: ты что-то устанавливаешь? или ЧТО тут вообще должно происходить?
            document.getElementById('form-cars-address').style.display = 'none'
            return price
        }
    },false)
);

jQuery:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$("input[name=car-class]").change(function(){
    var price = +$(this).attr('data-cost');     // в этой строке укажи data-cost или что там тебе нужно вывести в result
    $("#result").html('<div class="result__service"><span style="font-size:22px;!important;">Дополнительные услуги: '+ price +' в‚Ѕ</span></div>');
    if(price > 0){
        $(this).data("service","200");
        $("#form-cars-address").css({'display':'block'});
        return price;
    }else{
        $(this).data("service","0");
        $("#form-cars-address").css({'display':'none'});
        return price;
    }
});

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

Добавлено через 1 час 6 минут

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

прописать перед ним плюсик

Приветствую! Где можно про это подробней почитать? Или как загуглить?

@kalabuni · 10.07.2018, 08:24

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

Где можно про это подробней почитать?

см. унарный плюс здесь

@Mr_Sergo · 10.07.2018, 08:26

kalabuni, Спасибо.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	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 - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	10.07.2018, 02:46
	установить значение атрибуту: Element.setAttribute() получить значение атрибута: Element.getAttribute() значение атрибута всегда имеет тип String т. е. если число 123 пропишете значением атрибута: Element.setAttribute('my-attrib', 123), то метод Element.getAttribute('my-attrib') вернёт строку '123' самый простой способ преобразовать строковое значение атрибута в числовое это прописать перед ним плюсик, вот так: +Element.getAttribute('my-attrib'), тогда получите число 123 1

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	10.07.2018, 08:26
	kalabuni, Спасибо. 0