কীভাবে ডেটা-আইডি অ্যাট্রিবিউট পাবেন?

Question

আমি jQuery quicksand প্লাগইন ব্যবহার করছি। আমাকে ক্লিক করা আইটেমটির ডেটা-আইডি পেতে এবং এটি একটি ওয়েব সার্ভিসে পাস করতে হবে। আমি কীভাবে ডেটা-আইডি বৈশিষ্ট্য পেতে পারি? আমি .on()বাছাই করা আইটেমগুলির জন্য ক্লিক ইভেন্টটিকে পুনরায় যুক্ত করতে পদ্ধতিটি ব্যবহার করছি ।

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

Comments

নতুন দর্শনার্থীদের জন্য বিজ্ঞপ্তি: জিকুয়ের.লাইভ () পদ্ধতিটি

— .on

সতর্কতা থেকে আপনার # টি অপসারণ করা উচিত, আপনার এটির দরকার নেই :-)

— কার্টার হয়ে

অ্যাটর ("# ডেটা-আইডি")) ভুল। সংশোধন: অ্যাটর ("ডেটা-আইডি"));

— নির্দেশিকা _nhcol.com.br_

@ ব্রুসএডামস এখন অবহিত on()হিসাবে পদ্ধতিটি ব্যবহার করতে প্রশ্নটি সম্পাদন করার উপযুক্ত হতে পারে live()এবং এই প্রশ্নটি বেশ কয়েকজন দর্শক পেয়ে যায়।

— ররি ম্যাকক্রসন

Answer 1

বৈশিষ্ট্যের সামগ্রীগুলি পেতে data-id(যেমন পছন্দ করে <a data-id="123">link</a>) আপনাকে ব্যবহার করতে হবে

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

বা .data()(আপনি যদি নতুন jQuery ব্যবহার করেন> = 1.4.3)

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

এবং অংশটি data-অবশ্যই ছোট হাতের হতে data-idNumহবে , যেমন কাজ করবে না, তবে data-idnumকরবে।

Comments

আমাকে ব্যবহার করতে attr()হয়েছিল কারণ জিক্যুয়ারি জিপ কোডগুলি ব্যবহার করে নেতৃস্থানীয় শূন্যগুলি সরিয়ে data()ফেলছিল, টিএফএম বলেছে "jQuery 1.4.3 হিসাবে এইচটিএমএল 5 ডেটা-বৈশিষ্ট্যগুলি স্বয়ংক্রিয়ভাবে jQuery এর ডেটা অবজেক্টে টানবে ... ... স্ট্রিংকে রূপান্তর করার জন্য প্রতিটি চেষ্টা করা হবে একটি জাভাস্ক্রিপ্ট মানতে (এতে বুলিয়ানস, সংখ্যা, অবজেক্টস, অ্যারে এবং নাল অন্তর্ভুক্ত) রয়েছে। মানটি কেবলমাত্র একটি সংখ্যায় রূপান্তরিত হয় যদি তা করার সাথে মানটির প্রতিনিধিত্ব পরিবর্তন হয় না example উদাহরণস্বরূপ, "1E02" এবং "100.000" সমতুল্য সংখ্যার হিসাবে (সংখ্যার মান 100) তবে তাদের রূপান্তরকরণের ফলে তাদের প্রতিনিধিত্বের পরিবর্তন হবে যাতে তারা স্ট্রিং হিসাবে ছেড়ে যায় ""

— ওয়েসলি মার্চ ২৯'১৪

এটি আমার জন্য 'অপরিজ্ঞাত' ফিরছে।

— চিরকাল

কারওর কাছে সুস্পষ্ট হওয়া সত্ত্বেও, আমি মনে করি যে এটির জন্য সমস্যা ছিল তাদের জন্য এটি লক্ষ্য করা উচিত যে .attr () ব্যবহার করার সময় বন্ধনীর ভিতরে থাকা পাঠ্যটি আপনার কাস্টম ডেটা-অ্যাট্রিবিউট হিসাবে যা সেট করেছেন তা অবশ্যই মিলবে। অর্থাত্ যদি কাস্টম ডেটা অ্যাট্রিবিউটটি ডেটা-ভলিউম হয় , আপনার অবশ্যই এটি .attr ("ডেটা-ভলিউম") ব্যবহার করে রেফারেন্স করতে পারেন । এবং, jQuery এর 1.4.3 ঊর্ধ্বমুখী এবং .data ব্যবহার () সঙ্গে, বন্ধনী ভিতরে টেক্সট আপনার কাস্টম ডাটা অ্যাট্রিবিউট মেলানো ছাড়া নিরীক্ষার উপসর্গ। অর্থাত্ যদি কাস্টম ডেটা অ্যাট্রিবিউটটি ডেটা-ভলিউম হয় তবে আপনাকে অবশ্যই এটি .data ("ভলিউম") ব্যবহার করে রেফারেন্স করতে হবে ।

— লুক

যারা এটি রিপোর্ট করেন না তাদের জন্য, নিশ্চিত করুন যে আপনার অ্যাট্রিবিউটে কেবল ছোট হাতের অক্ষর রয়েছে। উদাহরণস্বরূপ, "ডেটা-তালিকাআইডি" "ডেটা-লিস্টিড" হওয়া উচিত। যে কারণে স্ট্যাকওভারফ্লো.com/ প্রশ্নস ১০০৯৯৯ 84 84৮ / / দেখুন ।

— উইন্ডচাইমস

বা$(this).data().id //returns 123

— ডেম পিলাফিয়ান

Answer 2

যদি আমরা বিদ্যমান, নেটিভ জাভাস্ক্রিপ্ট ব্যবহার করে এই বৈশিষ্ট্যগুলি পুনরুদ্ধার বা আপডেট করতে চাই , তবে আমরা নীচে দেখানো হিসাবে getAttribute এবং setAttribute পদ্ধতি ব্যবহার করে এটি করতে পারি:

জাভাস্ক্রিপ্ট মাধ্যমে

<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 মাধ্যমে

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

এই ডকুমেন্টেশন পড়ুন

Answer 3

গুরুত্বপূর্ণ তথ্য. মনে রাখবেন, আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে data- অ্যাট্রিবিউটটি গতিশীলভাবে সামঞ্জস্য করেন তবে এটি data()jQuery ফাংশনে প্রতিফলিত হবে না । আপনাকে এটিকে data()ফাংশনের মাধ্যমেও সামঞ্জস্য করতে হবে ।

<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

Comments

শুভ পয়েন্ট ... বৈশিষ্ট্যগুলি থেকে ডেটা রিফ্রেশ করার জন্য কোনও ডেটা () রয়েছে?

— হারাগ

এটি পরিবর্তনশীল এবং ডেটা অ্যাট্রিবিউট মানটি গতিশীলভাবে অ্যাক্সেসের জন্য একটি গুরুত্বপূর্ণ বিষয়।

— মোতাহার হোসেন

Answer 4

আপনি যদি পুরানো IE ব্রাউজারগুলি সম্পর্কে উদ্বিগ্ন না হন তবে আপনি HTML5 ডেটাসেট এপিআইও ব্যবহার করতে পারেন

এইচটিএমএল

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

জাতীয়

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

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

ডেমো: http://html5demos.com/dataset

সম্পূর্ণ ব্রাউজার সমর্থন তালিকা: http://caniuse.com/#feat=dataset

Answer 5

অবাক হওয়া কেউ উল্লেখ করেননি:

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

এখানে কার্যকরী উদাহরণ: https://jsfiddle.net/ed5axgvk/1/

Comments

খুব সুন্দর উত্তর। অনেক ধন্যবাদ.

— রুবারেন্ডিন্দা ধৈর্য

Answer 6

এইচটিএমএল

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

জাতীয়

$(this).data().value;

অথবা

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

এএনএস: 50

আমার জন্য কাজ কর!

Answer 7

আমি $ .ডাটা - 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

Answer 8

var id = $(this).dataset.id

আমার জন্য কাজ কর!

Answer 9

এর সাথে ডেটা অ্যাট্রিবিউট অ্যাক্সেস করা idআমার পক্ষে কিছুটা সহজ।

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

Answer 10

এই অংশের কোডটি ডেটা অ্যাট্রিবিউটের মান প্রদান করবে যেমন: ডেটা-আইডি, ডেটা-টাইম, ডেটা-নাম ইত্যাদি .., আমি আইডিটির জন্য দেখিয়েছি

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

JS:

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

// ডেটা-আইডি -> এ 1 এর মান পান

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

// এটি ডেটা-আইডি -> এ 2 পরিবর্তন করবে

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

// ডেটা-আইডি -> এ 2 এর মান পান

Answer 11

jQuery ব্যবহার:

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

Answer 12

যাঁরা গতিশীলভাবে সরঞ্জামটিপটি সরিয়ে ফেলা এবং পুনরায় সক্ষম করতে চাইছেন তাদের জন্য, আপনি পদ্ধতি disposeএবং enableপদ্ধতিগুলি ব্যবহার করতে পারেন । Https://getbootstrap.com/docs/4.0/components/tooltips/#tooltipdispose দেখুন

Answer 13

আমার একটা স্প্যান আছে আমি বিশিষ্ট ডেটা-টেক্সট-ল্যাংয়ের মান নিতে চাই, যা সংজ্ঞায়িত ব্যবহৃত হয়।

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

Answer 14

সমস্যাটি হ'ল আপনি ড্রপডাউন বা তালিকার বিকল্প বা নির্বাচিত বিকল্পটি নির্দিষ্ট করে দিচ্ছেন না, এখানে ড্রপডাউনয়ের উদাহরণ, আমি একটি ডেটা অ্যাট্রিবিউট ডেটা-রেকর্ড ধরে নিচ্ছি।

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