Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Получение значения атрибутов data-*

Есть такой вот html
HTML5
1
2
3
4
5
6
7
8
9
10
<div class="own-item active" >
     <div class="ps-item" data-hash="3">
                <img src="img/content/ps-1.jpg"/>
       </div>
</div>
<div class="own-item" >
     <div class="ps-item" data-hash="4">
                <img src="img/content/ps-1.jpg"/>
       </div>
</div>
мне нужно чтобы по клику на элемент он переходил к следующему 4-му
скрипт на преход я написал, но нужна переменная которая будет в себе хранить data-hash="4". И чёт скок я не пытаюсь он не может её определить
Javascript
1
2
3
var n = $('.own-item .active').children('ps-item').data('hash');
var n = $('ps-item').data('hash');
var n = $('.active').children('ps-item').data('hash');
в чём может быть проблема ?

P.S. скрипт перехода
Javascript
1
2
3
4
$('.owl-next').click (function(){
            $(".own-page").removeClass('active');
            $('.own-page').eq(n+1).addClass('active');
});
Ответ:
Javascript
1
var n = $('.own-item.active .ps-item').attr('data-hash');
Вопрос: Нзначение атрибута data

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>data-*</title>
 </head>
 <body>
  <div id="user" data-id="1234567890" 
       data-user="Вася Пупкин" 
       data-date-of-birth="01.04.1990">Пользователь</div>
  <script>
   var el = document.getElementById('user');
   id = el.dataset.id; // Получаем значение атрибута data-id
   user = el.dataset.user;
   dob = el.dataset.dateOfBirth; // Получаем значение атрибута data-date-of-birth
   el.dataset.ban = 'Нет'; // Назначаем новый атрибут data-ban и его значение
   console.log(user); // Выводим в консоль значение переменной user
   console.log(dob); // Выводим в консоль значение переменной dob
  </script>
 </body>
</html>
Поясните пожалуйста работу этого атрибута я и не понимаю. Или пойму когда js пройду? Или мне пока достаточно запомнить что он позволяет создавать переменные?
Ответ: На программирование это никак не походит. У вас есть элемент, вы хотите прикрепить к нему какую-либо информацию, чтобы потом ее прочитать.
CSS
1
2
3
span:after {
  content: attr(data-mytext);
}
HTML5
1
<span data-mytext="Hello world!"></span>
Вопрос: Нахождения элемента по атрибуту data

Со обственно не решу задачу

Javascript
1
2
3
4
5
6
$('.filter > button').each(function(key, value){
  if( $(this).find('[data-type="124"]').hasClass('active') ){
    $(this).toggleClass('active').toggleClass('disable');
  }
  
});
Логика такая, если в Блоке .filter есть элемент с атрибутом data-type="124" и он имеет класс active
то заменить ему класс на disable

И еще с этими массивами и объектами проблема

Javascript
1
2
3
4
5
6
7
8
9
10
$('.filter > button').each(function(k,v){
      if($(this).hasClass('active')){
         typeGame.push({'active' : $(this).data('type')});
      }else if($(this).hasClass('disable')){
         typeGame.push({'disable' : $(this).data('type')});
      }
    });
    console.log($.cookie('filter'));
 
    $.cookie('filter', typeGame, { expires: 7 });
Пытаюсь сохранить в куки фильтры для поиска , но в цикле получается не тот массив который нужен.
Нужно получить примерно так {'active' : type},{'active' :type} .........

Добавлено через 5 минут
Кликните здесь для просмотра всего текста
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
<center class="filter">
            <button type="button" data-type="dota" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-dota pr5"></span> Dota2 
                <span class="badge-rect badge-danger badge-count">4</span>
            </button>
            <button type="button" data-type="csgo" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-csgo pr5"></span> CS:GO
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="lol" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-lol pr5"></span> LOL
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="wot" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-wot pr5"></span> WOT
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="smite" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-smite pr5"></span> Smite
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="over" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-overwatch pr5"></span> Overwatch
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="hots" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-hots pr5"></span> HOTS
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
            <button type="button" data-type="st2" class="btn btn-sm btn-default m5 active">
                <span class="fa fa-st2 pr5"></span> StarCraft2
                <span class="badge-rect badge-danger badge-count">3</span>
            </button>
        </center>
Ответ: Sergey Yermak,
Javascript
1
2
3
4
5
6
7
$('.filter > button').each( function(key, value){
  if($('[data-type="dota"]').hasClass('active')){
    $('button[data-type="dota"]').toggleClass('active').toggleClass('disable');
  }else if($('button[data-type="dota"]').hasClass('disable')){
    $('[data-type="dota"]').toggleClass('disable').toggleClass('active');
  }
});
Это я решил сам, и так для меня удобнее
Вопрос: Как заменить значение data атрибута в ссылке?

Всем привет. Хочу заменить значение атрибута 'data-quantity' в ссылке. Как это сделать? через val, html, text, data("data-quantity", number), msglist.setAttribute("data-quantity", number) не получается..
var number = 3;
$('a').attr('data-quantity').val(number);

<a href="#" data-quantity="1">Купить</a>
Ответ:
Сообщение от ligisayan
вообщем как я понял data меняет код js, а setAttribute html и все работают только до перезагрузки
Метод .data() jQuery вообще не имеет отношения к атрибуту элемента data-var когда речь идет об установке этим методом какой либо переменной.

Если у элемента есть атрибут data-var, то метод element.data('var') вернет значение этого атрибута (начиная с версии jQuery 1.4.3). При этом, если значение этого атрибута корректная json-строка, то метод сразу преобразует это значение в объект, например, если data-var="[2,3]", то .data('var') вернет массив. В случае, если имя атрибута будет иметь более сложное сочетание через дефис, типа data-var-name, то получить его можно в camelCase: element.data('varName').

Но записать/изменить значение в data-var метод .data('var', value) не может, вместо этого он создаст переменную var со значением value, которая будет привязана к элементу, для которого был вызван этот метод (можно привязать к элементу и несколько переменных .data({var1: value1, var2: value2, ....}) ). Для этого и предназначен данный метод. Удалить эту переменную у элемента можно методом .removeData(). А вот метод javascript setAttribute будет изменять значение именно атрибута.

Вот так это выглядит:

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    var p = $('p');
    //получили значение атрибута
    alert(p.data('var'));
    //думаем, что изменяем его
    p.data('var', 55);
    //радуемся
    alert(p.data('var'));
    //а на самом деле воз и ныне там
    alert(p[0].getAttribute('data-var'));
});
</script>     
</head> 
<body>
<p data-var="22">Text</p>
</body> 
</html>

После того как элемент получил собственную jq-перменную "var" .data('var') будет обращаться уже к ней, а не к атрибуту data-var элемента.
Вопрос: Получить атрибуты data у элемента с которого произошло событие

Доброго времени суток! Подскажите пожалуйста, можно как-то забрать атрибуты data из тега <a>, которое вызывает

модальное окно bootstrap ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<a href="#" data-toggle="modal" data-target="#Modal" data-remote="false" class="btn btn-default phone input-group-addon">...</a>
 
<div class="modal fade" id="Modal">
    <div class="modal-dialog">
        <div class="modal-content container">
            <div class="modal-header">
                <div class="close" data-dismiss="modal">&times;</div>
                <h4 class="modal-title"><?php echo __('image', 'divs'); ?></h4>
            </div>
            <div class="modal-body container">
 
            </div>
        </div>
    </div>
</div>
Ответ: BANO, спс большое, уже легче стало намного
Вопрос: Невидимые атрибуты data-*

Здравствуйте. Не могу понять... Есть html
<div class="samples-blok">
   <ul class="sample-playlist">       
	        <li data-author="Djmax"
		    data-name="Danger"		    
		    data-url="http://mysite.ru/file/ebd106e2df6fd.mp3"
            data-track-id="27898"	  
		    class="play">
                  </li>
            <li data-author="DjПупкин"
		    data-name="Don"		    
		    data-url="http://mysite.ru/file/ebd10dtytdeddb7df6.mp3"	
            data-track-id="27899"	
		    class="play">
                  </li>
            <li data-author="Вася"
		    data-name="Мой твой"		    
		    data-url="http://mysite.ru/file/ebdtddthdtheddf6fd.mp3"
            data-track-id="27846"	  
		    class="play">
                  </li>
            .......
     </ul>
</div>

Есть jQuery, который выводит отдельную кнопку для каждой записи
var j = $("li.play", i);   
var tex = j.data('author') + j.data('name');
var b = $('<div><a style="height: 20px; width: 20px;float: right;" download="' + tex + '.mp3" href="' + j.data('url') + "?/" + tex + '.mp3" class="button"></a></div>');


Так вот, если переходить на эту страницу по аякс-ссылке, страница подгружается при помощи ajax и если смотреть на разметку через FireBug, то в ней отсутствуют все data-*, кроме data-track-id и class="play". Но если посмотреть исходный код страницы, так все эти атрибуты присутствуют. Появляется проблема с выполнением скрипта из=за отсутсвия атрибутов...
Не могу понять почему в исходном коде видны все атрибуты data, а в FireBug их нет? Как мне прочитать эти невидимые атрибуты?
Ответ: Aleksanderj,
увы не осилил ваш код
Вопрос: Селектор по среднему значению атрибута data

Добрый день помогите пожалуйста разобраться. Есть скрипт:

for (var i = 0; i < other_arr.length; i++) {
	var $other_name = other_arr[i].split('|')[0], // значение data атрибуту которое мы принимаем за название и в дальнейшем ищем внутри него нужный элемент;
	      $other_min = other_arr[i].split('|')[1], // минимальное допустимое значение 
	      $other_max = other_arr[i].split('|')[2], // максимальное допустимое значение

	$('.product').each(function(){
		$(this).find('[data-filter_name="'+$other_name+'"]').each(function(){
			$(this).data('filter_val')  // этот скрипт выберет все значения из [data-filter_val], а мне нужно что бы он выбрал только то значение [data-filter_val] которое находиться в приделах $other_min <= $(this).data('filter_val') <= $other_max
		})
	})
}


Например $other_min, равен 50; $other_max, равен 100, скрипт должен выбрать все значения [data-filter_val] которые лежат в приделах от 50 до 100.

Заранее премного благодарен
Ответ: smart-create,
Ответил в той теме
Вопрос: Получение значений атрибутов элемента, над которым произошёл event

Есть множество ссылок типа
HTML5
1
<a href='#'  class='btn btn-block btn-large btn-success modal_btn' data-somevalue1='1'>$newtime</a>
Каждая такая ссылка открывает одно и тоже модальное окно
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="box-modal" id="small-modal">    
      <div class="modal-close arcticmodal-close">x</div>
        <div class="modal-content-box">
          <b>Обратная связь</b>
          <p>Укажите свои данные и наши оператор свяжется с Вами в ближайшее время!</p>
          <form action="?addman" method="POST" name="form-1">
            <div class="input-prepend">
              <span class="add-on"></span>
              <input class="input-medium1" name="name" type="text" placeholder="Ваше имя">
            </div>
            <div class="input-prepend">
              <span class="add-on"></span>
              <input class="input-medium2" name="tell" type="text" placeholder="Ваш телефон">
            </div>
            <input type="submit" value="Добавить" class="feedback btn btn-block btn-success"  id="knopka">
          </form>
        </div>
      </div>
Подскажите как с помощью
Javascript
1
$('.modal_btn').click(function(e) 
можно вытащить данные из атрибутов ссылки и отправить их вместе с формой модального окна.
В JQ, Ajax и jQuery разбираюсь очень плохо. Кто чем может помогите!
Ответ: Не знаю поможет ли .. ноооо....
Я так понял вы знаете как выбирать значение элементов но не знаете как передать их php
Вот так -
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax({
            url: "action.php", // путь к обработчику
            type: "POST", // метод передачи данных
            data: ({var1: "go", var2: number}), // передаваемые данные (имя переменной=>значение) через запятую
            dataType: "html", // ожидаемый тип данных
            beforeSend: funcB, // функция работает во время передачи и получения ответа
            success: funcA // функция сработает после получения данных
        });
 
function funcB() {
 
}
 
function funcA(data, d) {
// в data данные от сервера
}
Вопрос: Вывод изображения через атрибут data-*

День добрый, уважаемые.

С javascript знаком очень поверхностно, встала такая задача:

есть сайт, на нем неск товаров и форма обратной связи у каждого товара одна и та же.

В форму через скрипт подставляются разные значения, например, название того или иного товара.

Нужно добавить в форму вывод картинки того товара, на который кликнул пользователь.

Есть код кнопки заказа:

HTML5
1
<a class="btn open-zakaz" data-title="Название товара" data-img="img/bg1.jpg" href="#">Подробнее</a>
+ там еще неск атрибутов. В форме прописал следующее:

HTML5
1
<img src="" class="modal-img" id="modal-img-zakaz" />

Ну и скрипт, который ищет data атрибут и добавляет элементам формы:

Javascript
1
2
3
4
5
6
7
8
    $('.open-zakaz').click(function(e) {
        e.preventDefault();
 
        var $modal = $('#modal-zakaz'), img = document.getElementById('modal-img-zakaz');
        img.src = $modal.find('#modal-img-zakaz').html( $(this).data('img') );
        $modal.find('#modal-title-zakaz').text( $(this).data('title') );
 
и тд

Я добавил переменную img, которая ищет тег <img> с нужным id, затем попытался вставить в src этого тега содержимое data атрибута. (тут то видимо и косяк)

В итоге в src картинки написано [object Object]. Объясните, пожалуйста, в чем причина?
Ответ: Отлично, спасибо большое!
Вопрос: Работа с data-атрибутами.

Здравствуйте все!

Подскажите как выбрать элементы, в моем случае div-ы, по значениям атрибутов data- ?

Например, есть у меня на странице 5 div-ов с разными data-атрибутами и два input-а для ввода желаемых значений:

<input oninput="filter()" onkeyup="filter()" type="text" id="filter-price">
<input oninput="filter()" onkeyup="filter()" type="text" id="filter-space">

<div data-price="1000" data-space="10">DIV 1</div>
<div data-price="1500" data-space="20">DIV 2</div>
<div data-price="2000" data-space="30">DIV 3</div>
<div data-price="3500" data-space="40">DIV 4</div>
<div data-price="5000" data-space="50">DIV 5</div>


Суть: Мне нужны «товары» со стоимостью (data-price) <= 3000 и размером (data-space) >= 20

То есть, при вводе в input-ы значений 3000 и 20, должны остаться DIV 2 и 3.

Вопрос: Как организовать сей процесс?

Пока получается только выводить div-ы «точным попаданием», т.е. ввожу 2000 и 30, получаю DIV 3.

P.S.: Убираю лишнее так:
$('div').css('display', 'none');


Буду признателен!
Ответ:
Сообщение от рони
у меня список для переменных очень короткий.
Представляю код в таком стиле на нативном js, сплошной мозговой штурм