Làm thế nào để có được thuộc tính data-id?

Tôi đang sử dụng plugin quicksand jQuery. Tôi cần lấy id dữ liệu của mục được nhấp và chuyển nó vào dịch vụ web. Làm cách nào để có được thuộc tính data-id? Tôi đang sử dụng .on()phương pháp để liên kết lại sự kiện nhấp chuột cho các mục được sắp xếp.

$("#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>

Để có được nội dung của thuộc tính data-id(như trong <a data-id="123">link</a>), bạn phải sử dụng

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

hoặc .data()(nếu bạn sử dụng jQuery mới hơn> = 1.4.3)

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

và phần sau data-phải là chữ thường, ví dụ data-idNumsẽ không hoạt động, nhưng data-idnumsẽ.

Nếu chúng tôi muốn truy xuất hoặc cập nhật các thuộc tính này bằng JavaScript gốc, hiện có , thì chúng tôi có thể làm như vậy bằng cách sử dụng các phương thức getAttribution và setAttribution như dưới đây:

Thông qua 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>

Thông qua 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');

Đọc tài liệu này

Lưu ý quan trọng. Hãy nhớ rằng, nếu bạn điều chỉnh data- thuộc tính động thông qua JavaScript, nó sẽ KHÔNG được phản ánh trong data()hàm jQuery. Bạn phải điều chỉnh nó thông qua data()chức năng là tốt.

<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

Nếu bạn không quan tâm đến các trình duyệt IE cũ, bạn cũng có thể sử dụng API tập dữ liệu HTML5

HTML

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

Mã não

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

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

Bản trình diễn: http://html5demos.com/dataset

Danh sách hỗ trợ trình duyệt đầy đủ: http://caniuse.com/#feat=dataset

Ngạc nhiên không ai nhắc đến:

<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"));
});

Dưới đây là ví dụ hoạt động: https://jsfiddle.net/ed5axgvk/1/

HTML

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

Mã não

$(this).data().value;

hoặc là

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

ANS: 50

Làm việc cho tôi!

Tôi sử dụng $ .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

làm việc cho tôi

Truy cập thuộc tính dữ liệu với riêng nó idlà một chút dễ dàng đối với tôi.

$("#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>

Đoạn mã này sẽ trả về giá trị của các thuộc tính dữ liệu, ví dụ: data-id, data-time, data-name, v.v., tôi đã hiển thị cho id

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

js:

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

// lấy giá trị của id dữ liệu -> a1

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

// điều này sẽ thay đổi id dữ liệu -> a2

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

// lấy giá trị của id dữ liệu -> a2

sử dụng jQuery:

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

Đối với những người muốn tự động gỡ bỏ và kích hoạt lại tooltip, bạn có thể sử dụng các phương thức disposevà enable. Xem https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose

Tôi có một khoảng. Tôi muốn lấy giá trị của thuộc tính data-txt-lang, được sử dụng được xác định.

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

Vấn đề là bạn không chỉ định tùy chọn hoặc tùy chọn được chọn của danh sách thả xuống hoặc danh sách, Dưới đây là một ví dụ cho danh sách thả xuống, tôi giả sử một bản ghi dữ liệu thuộc tính dữ liệu.

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