Comment obtenir l'attribut data-id?

J'utilise le plugin jQuery quicksand. J'ai besoin d'obtenir l'ID de données de l'élément cliqué et de le transmettre à un service Web. Comment obtenir l'attribut data-id? J'utilise la .on()méthode pour lier à nouveau l'événement click pour les éléments triés.

$("#list li").on('click', function() {
  //  ret = DetailsView.GetProject($(this).attr("#data-id"), OnComplete, OnTimeOut, OnError);
  alert($(this).attr("#data-id"));
});

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<ul id="list" class="grid">
  <li data-id="id-40" class="win">
    <a id="ctl00_cphBody_ListView1_ctrl0_SelectButton" class="project" href="#">
      <img src="themes/clean/images/win.jpg" class="project-image" alt="get data-id" />
    </a>
  </li>
</ul>

Pour obtenir le contenu de l'attribut data-id(comme dans <a data-id="123">link</a>), vous devez utiliser

$(this).attr("data-id") // will return the string "123"

ou .data()(si vous utilisez une nouvelle jQuery> = 1.4.3)

$(this).data("id") // will return the number 123

et la partie après data-doit être en minuscule, par exemple data-idNumne fonctionnera pas, mais le data-idnumfera.

Si nous voulons récupérer ou mettre à jour ces attributs à l'aide de JavaScript natif existant, nous pouvons le faire en utilisant les méthodes getAttribute et setAttribute comme indiqué ci-dessous:

Via JavaScript

<div id='strawberry-plant' data-fruit='12'></div>

<script>
// 'Getting' data-attributes using getAttribute
var plant = document.getElementById('strawberry-plant');
var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'

// 'Setting' data-attributes using setAttribute
plant.setAttribute('data-fruit','7'); // Pesky birds
</script>

Grâce à jQuery

// Fetching data
var fruitCount = $(this).data('fruit');
OR 
// If you updated the value, you will need to use below code to fetch new value 
// otherwise above gives the old value which is intially set.
// And also above does not work in ***Firefox***, so use below code to fetch value
var fruitCount = $(this).attr('data-fruit');

// Assigning data
$(this).attr('data-fruit','7');

Lisez cette documentation

Note importante. Gardez à l'esprit que si vous ajustez l' data- attribut dynamiquement via JavaScript, il ne sera PAS reflété dans la data()fonction jQuery. Vous devez également l'ajuster via la data()fonction.

<a data-id="123">link</a>

js:

$(this).data("id") // returns 123
$(this).attr("data-id", "321"); //change the attribute
$(this).data("id") // STILL returns 123!!!
$(this).data("id", "321")
$(this).data("id") // NOW we have 321

Si vous n'êtes pas préoccupé par les anciens navigateurs IE, vous pouvez également utiliser l' API de jeu de données HTML5

HTML

<div id="my-div" data-info="some info here" data-other-info="more info here">My Awesome Div</div>

JS

var myDiv = document.querySelector('#my-div');

myDiv.dataset.info // "some info here"
myDiv.dataset.otherInfo // "more info here"

Démo: http://html5demos.com/dataset

Liste complète de prise en charge du navigateur: http://caniuse.com/#feat=dataset

Surpris, personne n'a mentionné:

<select id="selectVehicle">
     <option value="1" data-year="2011">Mazda</option>
     <option value="2" data-year="2015">Honda</option>
     <option value="3" data-year="2008">Mercedes</option>
     <option value="4" data-year="2005">Toyota</option>
    </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Voici l'exemple de travail: https://jsfiddle.net/ed5axgvk/1/

HTML

<span id="spanTest" data-value="50">test</span>

JS

$(this).data().value;

ou

$("span#spanTest").data().value;

ANS: 50

Travaille pour moi!

J'utilise $ .data - http://api.jquery.com/jquery.data/

//Set value 7 to data-id 
$.data(this, 'id', 7);

//Get value from data-id
alert( $(this).data("id") ); // => outputs 7

var id = $(this).dataset.id

travaille pour moi!

Accéder à l'attribut de données avec le sien idest un peu facile pour moi.

$("#Id").data("attribute");

function myFunction(){
  alert($("#button1").data("sample-id"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="button1" data-sample-id="gotcha!" onclick="myFunction()"> Clickhere </button>

Ce morceau de code renverra la valeur des attributs de données, par exemple: data-id, data-time, data-name etc., je l'ai montré pour l'id

<a href="#" id="click-demo" data-id="a1">Click</a>

js:

$(this).data("id");

// récupère la valeur du data-id -> a1

$(this).data("id", "a2");

// cela changera l'ID de données -> a2

$(this).data("id");

// récupère la valeur du data-id -> a2

en utilisant jQuery:

  $( ".myClass" ).load(function() {
    var myId = $(this).data("id");
    $('.myClass').attr('id', myId);
  });

Pour ceux qui souhaitent supprimer et réactiver dynamiquement l'info-bulle, vous pouvez utiliser les méthodes disposeet enable. Voir https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose

J'ai une envergure. Je veux prendre la valeur de l'attribut data-txt-lang, qui est utilisé défini.

$(document).ready(function ()
{
<span class="txt-lang-btn" data-txt-lang="en">EN</span>
alert($('.txt-lang-btn').attr('data-txt-lang'));
});

Le problème est que vous ne spécifiez pas l'option ou l'option sélectionnée de liste déroulante ou de liste, voici un exemple de liste déroulante, je suppose un enregistrement de données d'attribut de données.

$('#select').on('change', function(){
        let element = $("#visiabletoID");
        element.val($(this).find(':selected').data('record'));
    });