Veri kimliği özelliği nasıl edinilir?

JQuery quicksand eklentisini kullanıyorum. Tıklanan öğenin veri kimliği almak ve bir web hizmetine geçmek gerekir. Veri kimliği özelliğini nasıl edinebilirim? .on()Sıralı öğeler için tıklama olayı yeniden bağlama yöntemini kullanıyorum .

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

Özelliğin içeriğini almak için data-id(gibi <a data-id="123">link</a>) kullanmanız gerekir

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

veya .data()(daha yeni jQuery> = 1.4.3 kullanıyorsanız)

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

ve sonraki kısım data-küçük harf olmalıdır, örneğin data-idNumçalışmaz, ancak data-idnumçalışacaktır.

Bu öznitelikleri mevcut, yerel JavaScript kullanarak almak veya güncellemek istiyorsak, aşağıda gösterildiği gibi getAttribute ve setAttribute yöntemlerini kullanarak bunu yapabiliriz:

JavaScript ile

<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>

JQuery aracılığıyla

// 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');

Bu dokümanları okuyun

Önemli Not. data- Özniteliği JavaScript aracılığıyla dinamik olarak ayarlarsanız data()jQuery işlevine yansıtılmayacağını unutmayın . Ayrıca data()fonksiyon üzerinden ayarlamanız gerekir .

<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

Eski IE tarayıcıları hakkında endişeleriniz yoksa, HTML5 veri kümesi API'sını

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"

Demo: http://html5demos.com/dataset

Tam tarayıcı destek listesi: http://caniuse.com/#feat=dataset

Kimse bahsetmedi şaşırttı:

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

İşte çalışma örneği: https://jsfiddle.net/ed5axgvk/1/

HTML

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

JS

$(this).data().value;

veya

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

ANS: 50

Benim için çalışıyor!

$ .Data kullanıyorum - 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

benim için çalışıyor!

Kendi veri özniteliğine erişmek idbenim için biraz kolay.

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

Bu kod parçası veri özniteliklerinin değerini döndürecektir örneğin: data-id, data-time, data-name vs .., id için gösterdim

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

js:

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

// data-id değerini alın -> a1

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

// bu veri kimliğini değiştirecek -> a2

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

// data-id değerini alın -> a2

jQuery kullanarak:

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

Araç ipucunu dinamik olarak kaldırmak ve yeniden etkinleştirmek isteyenler için disposeve enableyöntemlerini kullanabilirsiniz . Bkz. Https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose

Bir sürem var. Tanımlanan kullanılan data-txt-lang özniteliğinin değerini almak istiyorum.

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

Sorun, açılır liste veya liste seçeneği veya seçilen seçeneği belirtmiyoruz, İşte açılan için bir örnek, bir veri özniteliği veri kaydı varsayıyorum.

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