Форум

lego9 · #1 (**permalink**) 13.02.2020, 18:29

Господа, у меня есть некий HTML код и мне из JS нужно получить значение которое стоит в аттрибуте.

<div class="col-1">
            <input type="checkbox" class="" data-column="1" id="depotID" ng-change="vm.coluVisi()" ng-model="vm.depotID">            
</div>

мне нужно получить то, что стоит в data-column, то есть "1".
Я это делаю так:

var tmp = $(this).attr('data-column')

В итоге в tmp находится NaN.
Что неправильно?

рони · #2 (**permalink**) 13.02.2020, 18:33

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

Что неправильно?

this не input

oleg901 · #3 (**permalink**) 13.02.2020, 18:58

<html>
<head>
<meta charset="utf-8" />
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div class="col-1">
            <input type="checkbox" class="" data-column="1" id="depotID" ng-change="vm.coluVisi()" ng-model="vm.depotID">           
   </div>
	<script type="text/javascript">
			
		let input_value =	document.querySelector(".col-1 > input");
		let val 				= input_value.attributes[2].nodeValue;
			console.log(val);
		
</script>
</body>
</html>

Можно так. В твоем случае "this" не является инпутом прежде чем обращаться к элементу смотрите на него через "console.log"

рони · #4 (**permalink**) 13.02.2020, 19:13

oleg901,
на всякий случай
атрибут run для запуска здесь, и dataset для data-атрибутов

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

lego9 · #5 (**permalink**) 13.02.2020, 19:45

oleg901, рони,

у меня 42 чекбокса. мне нужно возвращать номер чекбокса. Ваш код возвращает всегда "1".
Как мне вернуть номер чекбокса?

<div class="container-fluid no-pad">

    <div class="row">
        <div class="col-1">
            <input type="checkbox" class="" data-column="1" id="depotID" ng-change="vm.coluVisi()" ng-model="vm.depotID">
            <label class="" for="">DepotID</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="2" id="depotBezeichnung" ng-change="vm.coluVisi()" ng-model="vm.depotBezeichnung">
            <label class="" for="">DepotBezeichn.</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="3" id="plattform" ng-change="vm.coluVisi()" ng-model="vm.plattform">
            <label class="" for="">Plattform</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="4" id="bezeichnung" ng-change="vm.coluVisi()" ng-model="vm.bezeichnung">
            <label class="" for="">Bezeichnung</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" id="handelstag" ng-change="vm.coluVisi()" ng-model="vm.handelstag">
            <label class="" for="">Handelstag</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" id="iSIN" ng-change="vm.coluVisi()" ng-model="vm.iSIN">
            <label class="" for="">ISIN</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" id="geschaeftsart" ng-change="vm.coluVisi()" ng-model="vm.geschaeftsart">
            <label class="" for="">Geschaeftsart</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" id="stueckzahl" ng-change="vm.coluVisi()" ng-model="vm.stueckzahl">
            <label class="" for="">Stueckzahl</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" id="kurswaehrung" ng-change="vm.coluVisi()" ng-model="vm.kurswaehrung">
            <label class="" for="">Kurswaehrung</label>
        </div>
........
........
........

рони · #6 (**permalink**) 13.02.2020, 20:19

lego9,
возможно вам нужен специалист по Angular.

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

мне нужно возвращать номер чекбокса.

в любом случае нужен ваш код.

voraa · #7 (**permalink**) 13.02.2020, 21:42

let datavalue = document.getElementById(' Id inputa ').dataset('column')

Вместо document.getElementById(' Id inputa ') можете как угодно получить ваш инпут.

lego9 · #8 (**permalink**) 14.02.2020, 12:22

Цитата:

let datavalue = document.getElementById(' Id inputa ').dataset('column')

Вместо document.getElementById(' Id inputa ') можете как угодно получить ваш инпут.

Извините пожалуйста я не понял к сожаленю что Вы имеете в виду... А как мне узнать ID инпута. Мне нужно получить значение из нажатого чекбокса... коих у меня 42. Поэтому я пытался использовать this. Это не правильно... Как правильно я что-т не могу найти...

lego9 · #9 (**permalink**) 14.02.2020, 12:27

Господа, еще раз спасибо ответившим. Для меня всё что связано с фронтом сущий кошмар...
Я к сожалению не все понял из Ваших двух последних постов, чтобы не тратить Ваше время, опишу подробнее. С большими кусками кода. У меня есть 42 чек-бокса по которым мне надо включать и отключать видимость столбцов.
Вот HTML для чекбоксов:

<div class="container-fluid no-pad">
 
    <div class="row">
        <div class="col-1">
            <input type="checkbox" class="" data-column="1" id="depotID" ng-change="vm.coluVisi()" ng-model="vm.depotID">
            <label class="" for="">DepotID</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="2" id="depotBezeichnung" ng-change="vm.coluVisi()" ng-model="vm.depotBezeichnung">
            <label class="" for="">DepotBezeichn.</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="3" id="plattform" ng-change="vm.coluVisi()" ng-model="vm.plattform">
            <label class="" for="">Plattform</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="4" id="bezeichnung" ng-change="vm.coluVisi()" ng-model="vm.bezeichnung">
            <label class="" for="">Bezeichnung</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="5" id="handelstag" ng-change="vm.coluVisi()" ng-model="vm.handelstag">
            <label class="" for="">Handelstag</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="6" id="iSIN" ng-change="vm.coluVisi()" ng-model="vm.iSIN">
            <label class="" for="">ISIN</label>
        </div>
        <div class="col-1">
            <input type="checkbox" class="" data-column="7" id="geschaeftsart" ng-change="vm.coluVisi()" ng-model="vm.geschaeftsart">
            <label class="" for="">Geschaeftsart</label>
        </div>
        и т.д.
...............
...............
    </div>

И вот функция в AngularJS компоненте, котороя нуждается в значении data-column="ХХ":

function coluVisi() {
 
            // Get the column API object
            var XX = $(this).attr('data-column'); // не правильно!  Но Мне нужно как то получить ХХ
            var col = vm.dtInstance.DataTable.column(XX);
 
            // Toggle the visibility          
            col.visible(!col.visible());
}

Мне нужно как то получить ХХ, я бъюсь уже непозволительное количество часов! Это же скорее всего как-то очень не сложно, но я почему то не могу найти как написать...
HELP

Nexus · #10 (**permalink**) 14.02.2020, 14:04

Не работал с angular, но попробуйте в html

ng-change="vm.coluVisi()"

заменить на

ng-change="vm.coluVisi($event)"

, и слушатель изменить на:

function coluVisi($event) {
    var target = $event.currentTarget;

    // Get the column API object
    var col = vm.dtInstance.DataTable.column(target.dataset.column);

    // Toggle the visibility          
    col.visible(!col.visible());
}

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

Форум

Справочник

Discord чат

Курсы javascript