কিছু HTML ট্যাগের জন্য কীভাবে স্বেচ্ছাসেবক ডেটা সংরক্ষণ করা যায়

Question

আমি একটি পৃষ্ঠা তৈরি করছি যা জাভাস্ক্রিপ্ট দ্বারা সরবরাহ করা কিছু মিথস্ক্রিয়া আছে। যেমন একটি উদাহরণ: লিঙ্কগুলি যা নিবন্ধের বিষয়বস্তু পেতে AJAX অনুরোধ প্রেরণ করে এবং তারপরে একটি ডেভিতে সেই ডেটা প্রদর্শন করে। স্পষ্টতই এই উদাহরণে, অতিরিক্ত তথ্য বিট করার জন্য আমার প্রতিটি লিঙ্কের প্রয়োজন: নিবন্ধের আইডি। ক্ষেত্রে আমি যেভাবে এটি পরিচালনা করছি তা হ'ল তথ্যটি এইচআরএফ লিঙ্কে রেখে দেওয়া:

<a class="article" href="#5">

তারপরে আমি a.article উপাদানগুলি খুঁজতে jQuery ব্যবহার করি এবং উপযুক্ত ইভেন্ট হ্যান্ডলার সংযুক্ত করি। (এখানে ব্যবহারযোগ্যতা বা শব্দার্থবিজ্ঞানের বিষয়ে খুব বেশি ঝুঁকবেন না, এটি কেবল একটি উদাহরণ)

যাইহোক, এই পদ্ধতিটি কার্যকর হয় তবে এটি কিছুটা গন্ধ পায় এবং এটি মোটেও এক্সটেনসিবল হয় না (যদি ক্লিক ফাংশনে একাধিক প্যারামিটার থাকে তবে কী হবে? যদি এই প্যারামিটারগুলির কিছু someচ্ছিক হয়?)

তাত্ক্ষণিকভাবে সুস্পষ্ট উত্তর ছিল উপাদানটিতে বৈশিষ্ট্যগুলি ব্যবহার করা। আমি বলতে চাইছি, তারা ঠিক তাই করছে? (ধরণের)

<a articleid="5" href="link/for/non-js-users.html">

ইন আমার সাম্প্রতিক প্রশ্ন আমি জিজ্ঞাসা করলাম যদি এই পদ্ধতি বৈধ ছিল, এবং এটি আমার নিজের DTD সংজ্ঞা (আমি না), তারপর না, এটা বৈধ বা নির্ভরযোগ্য নয় যে সংক্ষিপ্ত সক্রিয় আউট। একটি সাধারণ প্রতিক্রিয়াটি হ'ল ডেটাটি classঅ্যাট্রিবিউটে রাখা (যদিও এটি আমার খারাপ-বেছে নেওয়া উদাহরণের কারণে হতে পারে) তবে আমার কাছে এটি আরও গন্ধ পেয়েছে। হ্যাঁ এটি প্রযুক্তিগতভাবে বৈধ, তবে এটি কোনও দুর্দান্ত সমাধান নয়।

আমি অতীতে অন্য একটি পদ্ধতি ব্যবহার করেছি তা হ'ল কিছু জেএস তৈরি করা এবং এটি একটি <script>ট্যাগে পৃষ্ঠাতে সন্নিবেশ করানো , এমন একটি কাঠামো তৈরি করা যা অবজেক্টটির সাথে যুক্ত হবে।

var myData = {
    link0 : {
        articleId : 5,
        target : '#showMessage'
        // etc...
    },
    link1 : {
        articleId : 13
    }
};

<a href="..." id="link0">

তবে এটি বজায় রাখার জন্য বাটে আসল ব্যথা হতে পারে এবং এটি কেবল খুব অগোছালো।

সুতরাং, প্রশ্নটি পেতে, আপনি কীভাবে এইচটিএমএল ট্যাগগুলির জন্য তথ্যের স্বেচ্ছাসেবী টুকরো সংরক্ষণ করবেন ?

Comments

সম্পর্কিত প্রশ্ন: স্ট্যাকওভারফ্লো.com

— তামাস সিজনে

Answer 1

আপনি HTML এর কোন সংস্করণ ব্যবহার করছেন?

এইচটিএমএল 5 এ , যেমন- যেমন- ডেটা সহ কাস্টম বৈশিষ্ট্যগুলির উপসর্গ রাখা সম্পূর্ণ বৈধ

<div data-internalid="1337"></div>

এক্সএইচটিএমএল এ সত্যই বৈধ নয়। আপনি যদি এক্সএইচটিএমএল 1.1 মোডে থাকেন তবে ব্রাউজারটি সম্ভবত এটি সম্পর্কে অভিযোগ করবে, তবে 1.0 মোডে, বেশিরভাগ ব্রাউজারগুলি নিঃশব্দে এটিকে উপেক্ষা করবে।

আমি যদি আপনি হতাম তবে আমি স্ক্রিপ্ট ভিত্তিক পদ্ধতির অনুসরণ করতাম। এটি এটিকে স্বয়ংক্রিয়ভাবে সার্ভারের দিকে তৈরি করতে পারে যাতে এটি বজায় রাখার পিছনে কোনও ব্যথা না হয়।

Comments

@ ঠাচলক: সত্য, তবে এই বিটটি বেশিরভাগ ব্রাউজারে কাজ করবে, কোনওটিই কম নয়।

— তামাস সিজনে

অন্যরা দাবি করেছেন যে সমর্থনের জন্য অপেক্ষা করার কোনও কারণ নেই, যেহেতু এই কারণগুলির একমাত্র সমস্যাটি বৈধতা অর্জনে ব্যর্থতা, এবং এটি আইটি ভঙ্গ করে না। : টি জে Crowler এর উত্তর এখানে দেখুন stackoverflow.com/questions/1923278/...

— ক্রিস

যদি আপনি ডেটা-এক্সএক্সএক্সএক্সএক্সবিটিবিটি ব্যবহার করেন এবং আপনি সেগুলি পুনরুদ্ধার করতে চান তবে আপনি কোনও তৃতীয় পক্ষের কাঠামো ছাড়াই কেবল "domElement.getAttribute ('ডেটা-যাই হোক না কেন')" ব্যবহার করতে পারেন।

— ওহাদ ক্রাভিক

মনে রাখবেন পারফরম্যান্স! jsperf.com/jquery-data-vs-jqueryselection-data/19

— ফিল্মজেজে

অনুস্মারক: jquery এর মাধ্যমে 1337, ডেটা পুনরুদ্ধার করতে, ভেরিয়েবলের নাম থেকে 'ডেটা' সরাতে ভুলবেন না। উদাহরণস্বরূপ, ব্যবহার করুন: এর $(this).data('internalid'); পরিবর্তে:$(this).data('data-internalid');

— গিডন রোসানথাল

Answer 2

আপনি যদি ইতিমধ্যে jQuery ব্যবহার করে থাকেন তবে আপনার "ডেটা" পদ্ধতিটি উত্তোলন করা উচিত যা jQuery এর সাথে ডোম উপাদানটিতে স্বেচ্ছাচারিত তথ্য সংরক্ষণের জন্য প্রস্তাবিত পদ্ধতি।

কিছু সঞ্চয় করতে:

$('#myElId').data('nameYourData', { foo: 'bar' });

ডেটা পুনরুদ্ধার করতে:

var myData = $('#myElId').data('nameYourData');

এটি যা রয়েছে তা কিন্তু আরও তথ্য / উদাহরণের জন্য jQuery ডকুমেন্টেশন একবার দেখুন।

Answer 3

অন্য একটি উপায়, আমি ব্যক্তিগতভাবে এটি ব্যবহার করব না তবে এটি কাজ করে (আপনার জেএসওএন বৈধ বলে নিশ্চিত করুন কারণ এভাল () বিপজ্জনক)।

<a class="article" href="link/for/non-js-users.html">
    <span style="display: none;">{"id": 1, "title":"Something"}</span>
    Text of Link
</a>

// javascript
var article = document.getElementsByClassName("article")[0];
var data = eval(article.childNodes[0].innerHTML);

Comments

পার্শ্বীয় চিন্তাভাবনার জন্য +1। আমি সম্মত হই যে আমি সম্ভবত এই পদ্ধতিটি ব্যবহার করতে চাই না, তবে এটি একটি অস্পষ্টভাবে কার্যকর বিকল্প!

— নিক

@ নিকফ আপনি পরিবর্তে jsfiddle.net/EAXmYeval ব্যবহার করে মুক্তি পেতে পারেনJSON.parse

— সাইমন

Answer 4

যথেচ্ছ গুণাবলী বৈধ নয়, তবে আধুনিক ব্রাউজারগুলিতে একেবারে নির্ভরযোগ্য। আপনি যদি জাভাস্ক্রিপ্টের মাধ্যমে বৈশিষ্ট্যগুলি সেট করে থাকেন তবে তার চেয়ে আপনার বৈধতা সম্পর্কেও চিন্তা করার দরকার নেই।

একটি বিকল্প জাভাস্ক্রিপ্টে বৈশিষ্ট্য সেট করা হয়। jQuery এর কেবলমাত্র সেই উদ্দেশ্যে একটি দুর্দান্ত ইউটিলিটি পদ্ধতি রয়েছে বা আপনি নিজের রোল করতে পারেন।

Comments

data-পরিবর্তে গুণাবলী ব্যবহার করবেন না কেন ?

— ফ্লিম

Answer 5

একটি হ্যাক যা প্রায় প্রতিটি সম্ভাব্য ব্রাউজারের সাথে কাজ করতে চলেছে তা হল এই জাতীয় ওপেন ক্লাস ব্যবহার করা: <a class='data\_articleid\_5' href="link/for/non-js-users.html>;

এটি পিউরিস্টদের কাছে এটি সমস্ত মার্জিত নয়, তবে এটি সর্বজনীনভাবে সমর্থিত, মান-সম্মতিযুক্ত এবং ম্যানিপুলেট করা খুব সহজ। এটি সত্যিই সেরা সম্ভাব্য পদ্ধতির মতো বলে মনে হচ্ছে। আপনি যদি serialize, পরিবর্তন , কপি আপনার ট্যাগ, বা অন্য প্রায় কাছাকাছি কিছু করতে, dataহবে থাকার সংযুক্ত, কপি ইত্যাদি

একমাত্র সমস্যা হ'ল আপনি অ-সিরিয়ালাইজযোগ্য অবজেক্টগুলি সেভাবে সংরক্ষণ করতে পারবেন না এবং আপনি যদি সেখানে সত্যিই বিশাল কিছু রেখে দেন তবে সীমাবদ্ধতা থাকতে পারে।

দ্বিতীয় উপায় হ'ল নকল বৈশিষ্ট্যগুলি ব্যবহার করা :<a articleid='5' href="link/for/non-js-users.html">

এটি আরও মার্জিত, তবে মানটি ভেঙে দেয় এবং আমি সমর্থন সম্পর্কে 100% নিশ্চিত নই। অনেক ব্রাউজার এটিকে পুরোপুরি সমর্থন করে, আমি মনে করি আইআই 6 JSএটির জন্য অ্যাক্সেস সমর্থন করে তবে তা নয় CSS selectors(যা এখানে সত্যিকার অর্থে গুরুত্বপূর্ণ নয়), সম্ভবত কিছু ব্রাউজারগুলি সম্পূর্ণ বিভ্রান্ত হয়ে পড়েছে, আপনার এটি পরীক্ষা করা দরকার।

সিরিয়ালাইজেশন এবং ডিসরিয়ালাইজিংয়ের মতো মজার কাজ করা আরও বিপজ্জনক হবে।

idsখাঁটি JSহ্যাশ ব্যবহার করা বেশিরভাগ ক্ষেত্রে কাজ করে, আপনি যখন নিজের ট্যাগগুলি অনুলিপি করার চেষ্টা করেন তখন ব্যতীত। যদি আপনার কাছে থাকে তবে tag <a href="..." id="link0">এটি স্ট্যান্ডার্ড JSপদ্ধতিগুলির মাধ্যমে অনুলিপি করুন এবং তারপরে dataকেবল একটি অনুলিপি সংযুক্ত সংশোধন করার চেষ্টা করুন , অন্য অনুলিপিটি সংশোধন করা হবে।

আপনি যদি অনুলিপি না করেন tagবা কেবল পঠনযোগ্য ডেটা ব্যবহার না করেন তবে এটি কোনও সমস্যা নয় । যদি আপনি এর অনুলিপি করেন tagএবং সেগুলি সংশোধিত হয় তবে আপনাকে সেটিকে ম্যানুয়ালি হ্যান্ডেল করতে হবে।

Comments

ক্লাসে ভালস স্টোর করা দুর্দান্ত

— সারভানন রাজারামান

Answer 6

Jquery ব্যবহার করে,

জমানো: $('#element_id').data('extra_tag', 'extra_info');

পুনরুদ্ধার করা: $('#element_id').data('extra_tag');

Answer 7

আমি জানি আপনি বর্তমানে jQuery ব্যবহার করছেন তবে আপনি যদি অনক্লিক হ্যান্ডলারটি ইনলাইনটি সংজ্ঞায়িত করেন তবে কী হয়। তাহলে আপনি করতে পারেন:

 <a href='/link/for/non-js-users.htm' onclick='loadContent(5);return false;'>
     Article 5</a>

Answer 8

আপনি লুকানো ইনপুট ট্যাগ ব্যবহার করতে পারেন। আমি এটি দিয়ে w3.org এ কোনও বৈধতা ত্রুটি পাই না:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Hello</title>
  </head>
  <body>
    <div>
      <a class="article" href="link/for/non-js-users.html">
        <input style="display: none" name="articleid" type="hidden" value="5" />
      </a>
    </div>
  </body>
</html>

JQuery দিয়ে আপনি নিবন্ধের আইডিটি এমন কিছু (পরীক্ষিত নয়) সহ পাবেন:

$('.article input[name=articleid]').val();

তবে আমি এইচটিএমএল 5 এর প্রস্তাব দিই যদি এটি কোনও বিকল্প হয়।

Comments

আমি আসলে style="display: none"লুকানো ইনপুট ক্ষেত্রগুলির জন্য প্রয়োজন বলে মনে করি না ।

— phylae

ভাল পদ্ধতির, সমস্ত এইচটিএমএল সংস্করণে সম্পূর্ণ বৈধ। আপনার সমস্ত ব্যবহারকারীর একটি সম্পূর্ণ এইচটিএমএল-অভিযোগ ব্রাউজার থাকবে এই ধারনা দিয়ে কোডিংকে দৃ stron়ভাবে নিরুৎসাহিত করি। এবং প্রদর্শন: লুকানো ক্ষেত্রগুলির জন্য কোনওটিরই প্রয়োজন নেই।

— andreszs

খুব সুন্দর. এটি এক্সএইচটিএমএলের জন্য আমি খুঁজে পেয়েছি এমন সেরা সমাধান যেখানে ডেটা-অ্যাট্রিবিউটগুলি কোনও বৈধ বিকল্প নয়। আইএমও এটি অনিচ্ছাকৃত উপায়ে ট্যাগ / বৈশিষ্ট্যগুলিকে অপব্যবহার করে না, এটির প্রায় কোনও "গন্ধ" নেই। এবং অন্যরা যেমন বলেছিল: প্রদর্শন করুন: আসলেই কোনওটির প্রয়োজন হয় না।

— আরাহমান

Answer 9

ইচ্ছামতী ডেটা যুক্ত করার পরিবর্তে ইতিমধ্যে সেখানে অর্থবহ ডেটা ব্যবহার করবেন না কেন?

অর্থাত্ ব্যবহার করুন <a href="https://stackoverflow.com/articles/5/page-title" class="article-link">এবং তারপরে আপনি প্রোগ্রামে সমস্ত নিবন্ধের লিঙ্কগুলি পৃষ্ঠায় (শ্রেণীর নামের মাধ্যমে) এবং নিবন্ধ আইডি ( /articles\/(\d+)/বিপরীতে রেগেক্সের সাথে মিলে this.href) পেতে পারেন।

Comments

এটির সাথে সমস্যা হ'ল এটিও সত্যই এক্সটেনসিবল নয়

— এহডিভি

Answer 10

একজন jQuery ব্যবহারকারী হিসাবে আমি মেটাডেটা প্লাগইন ব্যবহার করব । এইচটিএমএল দেখতে পরিষ্কার দেখাচ্ছে, এটি বৈধতা দেয় এবং আপনি JSON স্বরলিপি ব্যবহার করে বর্ণিত যে কোনও কিছু এম্বেড করতে পারেন।

Answer 11

সুতরাং এটি করার জন্য চারটি পছন্দ থাকতে হবে:

1. আইডি বৈশিষ্ট্যে ডেটা রাখুন।
2. যথেচ্ছ বৈশিষ্ট্যে ডেটা রাখুন
3. ক্লাস অ্যাট্রিবিউটে ডেটা রাখুন
4. আপনার ডেটা অন্য ট্যাগে রাখুন

http://www.shanison.com/?p=321

Comments

@ h4ck3rm1k3 ... আইডি অ্যাট্রিবিউটে নয় কারণ ডকুমেন্টটি সাদা করা অবশ্যই অনন্য হতে হবে এবং এটি যদি সাইডবারে বা অন্য কিছুতে প্রয়োজন হয় তবে এটি পুনরাবৃত্তি করা উচিত ... এটি একটি পুরানো প্রশ্ন, তবে এটি এখনও বৈধ

— মাইগুয়েল-এসকিউ

Answer 12

আমি "rel" বৈশিষ্ট্যটি ব্যবহারের পক্ষে পরামর্শ দিই। এক্সএইচটিএমএল যাচাই করে, গুণটি নিজেই খুব কমই ব্যবহৃত হয় এবং ডেটা দক্ষতার সাথে পুনরুদ্ধার করা হয়।

Comments

এই আইডি লিঙ্কগুলিতে নফলো গুণটি ভাঙ্গতে পারে না

— কার্টার কোল

Answer 13

এটি ভাল পরামর্শ। @ প্রেস্টলকে ধন্যবাদ

আপনি যদি ইতিমধ্যে jQuery ব্যবহার করে থাকেন তবে আপনার "ডেটা" পদ্ধতিটি উত্তোলন করা উচিত যা jQuery এর সাথে ডোম উপাদানটিতে স্বেচ্ছাচারিত তথ্য সংরক্ষণের জন্য প্রস্তাবিত পদ্ধতি।

খুব সত্য, তবে আপনি যদি সরল-পুরাতন এইচটিএমএলটিতে স্বেচ্ছাচারিত তথ্য সংরক্ষণ করতে চান? এখানে আরও একটি বিকল্প এখানে ...

<input type="hidden" name="whatever" value="foobar"/>

কোনও লুকানো ইনপুট উপাদানটির নাম এবং মান বৈশিষ্ট্যগুলিতে আপনার ডেটা রাখুন। সার্ভারটি HTML (যেমন একটি পিএইচপি স্ক্রিপ্ট বা যাই হোক না কেন) তৈরি করছে এবং আপনার জাভাস্ক্রিপ্ট কোড এই তথ্যটি পরে ব্যবহার করতে চলেছে এটি কার্যকর হতে পারে।

স্বীকারযোগ্য, সবচেয়ে পরিষ্কার নয়, তবে এটি একটি বিকল্প। এটি সমস্ত ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ এবং বৈধ এক্সএইচটিএমএল। আপনার কাস্টম বৈশিষ্ট্যাবলী ব্যবহার করা উচিত নয় এবং আপনার 'ডেটা' উপসর্গের সাথে সত্যিকারের বৈশিষ্ট্যগুলি ব্যবহার করা উচিত নয় , কারণ এটি সমস্ত ব্রাউজারগুলিতে কাজ না করে। এবং, এছাড়াও, আপনার দস্তাবেজ ডাব্লু 3 সি বৈধতা পাস করবে না।

Comments

ঠিক নিশ্চিত নয়, তবে আপনি যদি "কড়া" ডক্টাইপের সাথে কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করেন তবে কিছু ব্রাউজার অভিযোগ করতে পারে। যে কোনও উপায়ে এটি বৈধ এক্সএইচটিএমএল নয়।

— বিমিনিয়ার

Answer 14

আপনি এলোমেলো উপাদান ( <span data-randomname="Data goes here..."></span>) এর নিজস্ব তৈরি বৈশিষ্ট্যের ডেটা-উপসর্গ ব্যবহার করতে পারেন , তবে এটি কেবল HTML5 এ বৈধ। সুতরাং ব্রাউজারগুলি বৈধতা সম্পর্কে অভিযোগ করতে পারে।

আপনি একটি <span style="display: none;">Data goes here...</span>ট্যাগ ব্যবহার করতে পারে । তবে এইভাবে আপনি অ্যাট্রিবিউট ফাংশনগুলি ব্যবহার করতে পারবেন না, এবং সিএসএস এবং জেএস বন্ধ করা থাকলে, এটি সত্যিই একটি ঝরঝরে সমাধান নয়।

তবে আমি ব্যক্তিগতভাবে যা পছন্দ করি তা হ'ল:

<input type="hidden" title="Your key..." value="Your value..." />

ইনপুট সমস্ত ক্ষেত্রেই লুকানো থাকবে, বৈশিষ্ট্যগুলি সম্পূর্ণ বৈধ, এবং এটি কোনও <form>ট্যাগের মধ্যে থাকলে এটি পাঠানো হবে না , যেহেতু এটির কোনও নাম নেই, তাই না? সর্বোপরি, বৈশিষ্ট্যগুলি মনে রাখা সত্যিই সহজ এবং কোডটি দেখতে সুন্দর এবং সহজে বোঝা যায়। এমনকি আপনি এতে একটি আইডি-বৈশিষ্ট্যও রাখতে পারেন, তাই আপনি সহজেই জাভাস্ক্রিপ্টের সাহায্যে এটি অ্যাক্সেস করতে এবং এর সাথে কী-মান জুটি অ্যাক্সেস করতে পারেন input.title; input.value।

Comments

আমি নিশ্চিত আপনি এইচটিএমএল সারণী এবং নির্বাচনের জন্য যথেষ্ট পরিমাণে কাজ করেন নি। আপনি কিছু কাজ সংরক্ষণ করার জন্য ডেটা- অ্যাট্রিবিউটটি প্রায়শই ব্যবহার করবেন।

আমি আসলে 'ডেটা' বৈশিষ্ট্যটি ব্যবহার করি। তবে এটি আপনার প্রয়োজনীয়তাগুলি নির্ভর করে। উদাহরণস্বরূপ, <ইনপুট /> এর সাহায্যে আপনার কোনও কী থাকতে পারে, যদিও 'ডেটা-' এর জন্য এটি কোনও অ-অক্ষরীয় অক্ষর ছাড়াই কেবলমাত্র একটি ছোট হাতের স্ট্রিংয়ের মধ্যে সীমাবদ্ধ।

— ইয়েতি

Answer 15

একটি সম্ভাবনা হতে পারে:

• সমস্ত বর্ধিত / স্বেচ্ছাসেবী ডেটা ধরে রাখতে একটি নতুন ডিভ তৈরি করুন
• এই ডিভটি অদৃশ্য হওয়ার জন্য কিছু করুন (যেমন সিএসএস প্লাস ডিভের একটি শ্রেণি বৈশিষ্ট্য)
• এই অদৃশ্য ডিভের মধ্যে [এক্স] এইচটিএমএল ট্যাগের মধ্যে বর্ধিত / স্বেচ্ছাসেবক ডেটা রাখুন (যেমন কোনও টেবিলের ঘরগুলির মধ্যে পাঠ্য হিসাবে বা আপনার পছন্দ মতো অন্য কোনও কিছুই)

Answer 16

আর একটি পদ্ধতির কী কী সংরক্ষণ করা যায়: নিম্নলিখিত বাক্য গঠনটি ব্যবহার করে একটি সাধারণ শ্রেণি হিসাবে মান জোড়:

<div id="my_div" class="foo:'bar'">...</div>

এটি বৈধ এবং jQuery নির্বাচনকারী বা কাস্টম তৈরি ফাংশন দিয়ে সহজেই পুনরুদ্ধার করা যায়।

Answer 17

আমার পূর্ববর্তী নিয়োগকর্তায়, আমরা ফর্মের উপাদানগুলি সম্পর্কে তথ্য রাখতে সর্বদা কাস্টম এইচটিএমএল ট্যাগ ব্যবহার করি। ক্যাপচার: আমরা জানতাম যে ব্যবহারকারী IE ব্যবহার করতে বাধ্য হয়েছিল।

ফায়ারফক্সের জন্য এটি তখন ভাল কাজ করেনি। আমি জানি না ফায়ারফক্স এটি পরিবর্তন করেছে কিনা, তবে সচেতন থাকুন যে এইচটিএমএল উপাদানগুলিতে আপনার নিজস্ব বৈশিষ্ট্য যুক্ত করা আপনার পাঠকের ব্রাউজার দ্বারা সমর্থিত হতে পারে বা নাও পারে।

আপনি যদি আপনার পাঠক কোন ব্রাউজার ব্যবহার করছেন তা নিয়ন্ত্রণ করতে পারেন (অর্থাত্ কর্পোরেশনের অভ্যন্তরীণ ওয়েব অ্যাপলেট), তবে যেকোন উপায়ে চেষ্টা করে দেখুন। এটা কি আঘাত করতে পারে, তাই না?

Answer 18

এইভাবেই আমি আপনাকে অজেক্স পৃষ্ঠাগুলি করি ... এটি একটি খুব সহজ পদ্ধতি ...

    function ajax_urls() {
       var objApps= ['ads','user'];
        $("a.ajx").each(function(){
               var url = $(this).attr('href');
               for ( var i=0;i< objApps.length;i++ ) {
                   if (url.indexOf("/"+objApps[i]+"/")>-1) {
                      $(this).attr("href",url.replace("/"+objApps[i]+"/","/"+objApps[i]+"/#p="));
                   }
               }
           });
}

এটি কীভাবে কাজ করে এটি মূলত সমস্ত ইউআরএলগুলিতে দেখায় যেগুলি 'এজেক্স' শ্রেণিযুক্ত এবং এটি একটি কীওয়ার্ড প্রতিস্থাপন করে এবং # চিহ্ন যোগ করে ... সুতরাং যদি জেএস বন্ধ থাকে তবে ইউআরএলগুলি সাধারণত তাদের মতোই কাজ করবে ... সব " অ্যাপস "(সাইটের প্রতিটি বিভাগ) এর নিজস্ব কীওয়ার্ড রয়েছে ... সুতরাং আমাকে আরও বেশি পৃষ্ঠা যুক্ত করতে উপরের জেএস অ্যারে যুক্ত করতে হবে ...

সুতরাং উদাহরণস্বরূপ আমার বর্তমান সেটিংস এতে সেট করা আছে:

 var objApps= ['ads','user'];

সুতরাং যদি আমার কাছে ইউআরএল থাকে তবে:

www.domain.com/ads/3923/bla/dada/bla

জেএস স্ক্রিপ্টটি / বিজ্ঞাপনগুলি / অংশ প্রতিস্থাপন করবে যাতে আমার URL টি শেষ হয়ে যায় end

www.domain.com/ads/#p=3923/bla/dada/bla

তারপরে পৃষ্ঠাটি লোড করার জন্য আমি jquery বিবিকিউ প্লাগইন ব্যবহার করি ...

http://benalman.com/projects/jquery-bbq-plugin/

Answer 19

আমি মেটাডাটা প্লাগইনটি এইচটিএমএল ট্যাগের মাধ্যমে স্বেচ্ছাসেবী ডেটা সংরক্ষণের সমস্যার এক দুর্দান্ত সমাধান হিসাবে খুঁজে পেয়েছি যাতে jQuery এর সাথে পুনরুদ্ধার এবং ব্যবহার সহজ করে তোলে।

গুরুত্বপূর্ণ : আপনার অন্তর্ভুক্ত প্রকৃত ফাইলটি কেবল 5 কেবি এবং 37 কেবি নয় (যা সম্পূর্ণ ডাউনলোড প্যাকেজের আকার)

গুগল অ্যানালিটিক্স ট্র্যাকিং ইভেন্ট তৈরি করার সময় আমি যে মানগুলি ব্যবহার করি সেগুলি সংরক্ষণ করার জন্য এটির একটি উদাহরণ এখানে রয়েছে (দ্রষ্টব্য: ডেটা.লাবেল এবং ডেটা.ভ্যালু optionচ্ছিক প্যারাম হতে পারে)

$(function () {
    $.each($(".ga-event"), function (index, value) {
        $(value).click(function () {
            var data = $(value).metadata();
            if (data.label && data.value) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label, data.value]);
            } else if (data.label) {
                _gaq.push(['_trackEvent', data.category, data.action, data.label]);
            } else {
                _gaq.push(['_trackEvent', data.category, data.action]);
            }
        });
    });
});

<input class="ga-event {category:'button', action:'click', label:'test', value:99}" type="button" value="Test"/>

Answer 20

এইচটিএমএল-তে, আমরা বৈশিষ্ট্যটির নামের পছন্দ হওয়ার আগে 'ডাটা-' উপসর্গের সাথে কাস্টম বৈশিষ্ট্যগুলি সংরক্ষণ করতে পারি

<p data-animal='dog'>This animal is a dog.</p>। ডকুমেন্টেশন চেক করুন

আমরা এই সম্পত্তিটি গতিশীলভাবে সেট করতে এবং jQuery এর মতো বৈশিষ্ট্যগুলি পেতে ব্যবহার করতে পারি: যদি আমাদের মতো এপি ট্যাগ থাকে

<p id='animal'>This animal is a dog.</p>

তারপরে উপরের ট্যাগটির জন্য 'ব্রিড' নামে একটি বৈশিষ্ট্য তৈরি করতে, আমরা লিখতে পারি:

$('#animal').attr('data-breed', 'pug');

যে কোনও সময় ডেটা পুনরুদ্ধার করতে, আমরা লিখতে পারি:

var breedtype = $('#animal').data('breed');

Answer 21

যতক্ষণ না আপনি প্রকৃত কাজ সার্ভারসাইড করে চলেছেন ততক্ষণ কেন আপনার আউটপুটটিতে এইচটিএমএল ট্যাগগুলিতে কাস্টম তথ্য দরকার হবে? সার্ভারে আপনাকে যা জানা দরকার তা হ'ল আপনার কাস্টম তথ্য সহ স্ট্রাকচারের যে কোনও ধরণের তালিকার একটি সূচক index আমি মনে করি আপনি তথ্যটি ভুল জায়গায় সন্ধান করছেন।

দুর্ভাগ্যজনক হলেও আমি স্বীকার করব যে প্রচুর ক্ষেত্রে সঠিক সমাধান সঠিক সমাধান নয়। এই ক্ষেত্রে আমি অতিরিক্ত তথ্য ধরে রাখতে কিছু জাভাস্ক্রিপ্ট উত্সাহিত করার দৃ strongly় পরামর্শ দেব।

অনেক বছর পর:

এই প্রশ্নটি data-...এইচটিএমএল 5 এর আবির্ভাবের সাথে বৈশিষ্ট্যগুলি একটি বৈধ বিকল্প হয়ে ওঠার প্রায় তিন বছর আগে পোস্ট করা হয়েছিল তাই সত্যটি স্থানান্তরিত হয়েছে এবং আমি যে মূল উত্তর দিয়েছি তা আর প্রাসঙ্গিক নয়। এখন আমি পরিবর্তে ডেটা অ্যাট্রিবিউট ব্যবহার করার পরামর্শ দেব ।

<a data-articleId="5" href="link/for/non-js-users.html">

<script>
    let anchors = document.getElementsByTagName('a');
    for (let anchor of anchors) {
        let articleId = anchor.dataset.articleId;
    }
</script>

Comments

আপনার কীভাবে তখন জাভাস্ক্রিপ্টে ডেটা পাস করার কথা?

— নিকফ