วิธีเก็บข้อมูลโดยพลการสำหรับแท็ก HTML บางตัว

ฉันกำลังสร้างหน้าเว็บที่มีการโต้ตอบจาก javascript ดังตัวอย่าง: ลิงก์ที่ส่งคำขอ AJAX เพื่อรับเนื้อหาของบทความจากนั้นแสดงข้อมูลนั้นใน div เห็นได้ชัดในตัวอย่างนี้ฉันต้องการแต่ละลิงก์เพื่อเก็บข้อมูลเพิ่มเติม: id ของบทความ วิธีที่ฉันจัดการกับมันในกรณีที่ต้องใส่ข้อมูลนั้นในลิงค์ href นี้:

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

ฉันใช้ jQuery เพื่อค้นหาองค์ประกอบ a.article และแนบตัวจัดการเหตุการณ์ที่เหมาะสม (อย่าเพิ่งแขวนกับการใช้งานหรือซีแมนทิกส์นี่เป็นเพียงตัวอย่าง)

อย่างไรก็ตามวิธีการนี้ใช้งานได้ แต่มีกลิ่นเล็กน้อยและไม่สามารถขยายได้เลย (จะเกิดอะไรขึ้นหากฟังก์ชันการคลิกมีพารามิเตอร์มากกว่าหนึ่งพารามิเตอร์จะเกิดอะไรขึ้นถ้าพารามิเตอร์บางตัวเป็นตัวเลือก)

คำตอบที่ชัดเจนทันทีคือการใช้คุณสมบัติกับองค์ประกอบ ฉันหมายถึงนั่นคือสิ่งที่พวกเขามีไว้ใช่มั้ย (ชนิด)

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

ในคำถามล่าสุดของฉันฉันถามว่าวิธีนี้ใช้ได้หรือไม่และมันกลับกลายเป็นว่าการกำหนด DTD ของฉันเอง (ฉันทำไม่ได้) ไม่ใช่ว่ามันไม่ถูกต้องหรือเชื่อถือได้ การตอบสนองทั่วไปคือการใส่ข้อมูลลงในclassแอตทริบิวต์ (แม้ว่าอาจเป็นเพราะตัวอย่างที่ฉันเลือกไม่ดี) แต่สำหรับฉันมันมีกลิ่นมากกว่านี้ ใช่มันถูกต้องทางเทคนิค แต่มันไม่ใช่ทางออกที่ดี

อีกวิธีหนึ่งที่ฉันเคยใช้ในอดีตคือการสร้าง JS และแทรกลงในหน้าใน<script>แท็กโดยสร้างโครงสร้างที่จะเชื่อมโยงกับวัตถุ

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

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

แต่นี่อาจเป็นความเจ็บปวดที่แท้จริงในการดูแลรักษาและโดยทั่วไปจะยุ่งเหยิงมาก

ดังนั้นเพื่อให้ได้คำถามคุณจะเก็บข้อมูลโดยพลการสำหรับแท็ก HTML ได้อย่างไร

คุณใช้ HTML เวอร์ชันไหน

ใน HTML 5 นั้นจะถูกต้องทั้งหมดหากมีแอตทริบิวต์ที่กำหนดเองซึ่งนำหน้าด้วย data-เช่น

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

ใน XHTML สิ่งนี้ไม่ถูกต้องจริงๆ หากคุณอยู่ในโหมด XHTML 1.1 เบราว์เซอร์อาจบ่นได้ แต่ในโหมด 1.0 เบราว์เซอร์ส่วนใหญ่จะไม่สนใจมันในทันที

ถ้าฉันเป็นคุณฉันจะทำตามวิธีการของสคริปต์ คุณสามารถทำให้มันสร้างขึ้นโดยอัตโนมัติในฝั่งเซิร์ฟเวอร์เพื่อไม่ให้เจ็บปวดในการดูแลรักษา

หากคุณใช้ jQuery อยู่แล้วคุณควรใช้ประโยชน์จากวิธี "data" ซึ่งเป็นวิธีที่แนะนำสำหรับการเก็บข้อมูลโดยพลการบนองค์ประกอบ dom ด้วย jQuery

ในการจัดเก็บบางสิ่ง:

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

ในการดึงข้อมูล:

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

นั่นคือทั้งหมดที่มีให้ แต่ดูที่เอกสาร jQueryสำหรับข้อมูลเพิ่มเติม / ตัวอย่าง

อีกวิธีหนึ่งฉันเองจะไม่ใช้สิ่งนี้ แต่ใช้งานได้ (รับรองว่า JSON ของคุณใช้ได้เพราะ eval () เป็นอันตราย)

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

แอตทริบิวต์ที่กำหนดเองไม่ถูกต้อง แต่เชื่อถือได้อย่างสมบูรณ์ในเบราว์เซอร์สมัยใหม่ หากคุณกำลังตั้งค่าคุณสมบัติผ่านทางจาวาสคริปต์คุณไม่ต้องกังวลเกี่ยวกับการตรวจสอบอีกด้วย

อีกทางเลือกหนึ่งคือการตั้งค่าคุณลักษณะในจาวาสคริปต์ jQuery มีวิธียูทิลิตี้ที่ดีเพียงเพื่อจุดประสงค์นั้นหรือคุณสามารถหมุนของคุณเอง

แฮ็คที่จะใช้งานได้กับเบราว์เซอร์ที่เป็นไปได้ทุกอย่างคือการใช้คลาสแบบเปิดดังนี้: <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% เบราว์เซอร์หลายตัวรองรับเต็มที่ฉันคิดว่า IE6 รองรับJSการเข้าถึง แต่ไม่ใช่CSS selectors(ซึ่งไม่สำคัญจริงๆที่นี่) บางทีเบราว์เซอร์บางตัวอาจสับสนอย่างสมบูรณ์คุณต้องตรวจสอบ

การทำสิ่งที่ตลก ๆ เช่นซีเรียลไลซ์และดีซีเรียลไลซ์เซชั่นจะยิ่งอันตรายมากขึ้น

การใช้แฮชidsบริสุทธิ์ใช้JSงานได้เป็นส่วนใหญ่ยกเว้นเมื่อคุณพยายามคัดลอกแท็ก หากคุณมีtag <a href="..." id="link0">ให้ทำสำเนาโดยใช้JSวิธีมาตรฐานแล้วลองแก้ไขไฟล์dataแนบเป็นสำเนาเดียวสำเนาอื่นจะถูกแก้ไข

มันไม่ได้เป็นปัญหาถ้าคุณไม่ได้คัดลอกtags หรือการใช้อ่านเท่านั้นข้อมูล หากคุณคัดลอกtagและพวกเขากำลังแก้ไขคุณจะต้องจัดการด้วยตนเอง

ใช้ jquery

ในการจัดเก็บ: $('#element_id').data('extra_tag', 'extra_info');

เพื่อดึง: $('#element_id').data('extra_tag');

ฉันรู้ว่าคุณกำลังใช้ jQuery อยู่ แต่ถ้าคุณกำหนด onclick handler แบบอินไลน์ จากนั้นคุณสามารถทำได้:

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

คุณสามารถใช้แท็กอินพุตที่ซ่อนอยู่ ฉันไม่พบข้อผิดพลาดในการตรวจสอบที่ 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 คุณจะได้รับ ID บทความที่มีลักษณะคล้าย (ไม่ผ่านการทดสอบ):

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

แต่ฉันจะแนะนำ HTML5 ถ้าเป็นตัวเลือก

ทำไมไม่ใช้ประโยชน์จากข้อมูลที่มีความหมายอยู่แล้วแทนที่จะเพิ่มข้อมูลตามอำเภอใจ?

เช่นใช้<a href="https://stackoverflow.com/articles/5/page-title" class="article-link">แล้วคุณสามารถรับลิงก์บทความทั้งหมดบนหน้าเว็บ (ผ่านชื่อคลาส) และรหัสบทความ (โดยจับคู่ regex /articles\/(\d+)/กับthis.href)

ในฐานะผู้ใช้ jQuery ฉันจะใช้ปลั๊กอินเมตาดาต้า HTML นั้นดูสะอาดตรวจสอบและคุณสามารถฝังสิ่งใดก็ได้ที่สามารถอธิบายได้โดยใช้สัญกรณ์ JSON

ดังนั้นควรมีสี่ตัวเลือกให้ทำ:

1. วางข้อมูลในแอตทริบิวต์ id
2. ใส่ข้อมูลในแอตทริบิวต์โดยพลการ
3. ใส่ข้อมูลในแอตทริบิวต์ class
4. ใส่ข้อมูลของคุณในแท็กอื่น

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

ฉันแนะนำให้ใช้แอตทริบิวต์ "rel" XHTML ตรวจสอบความถูกต้องแอตทริบิวต์ตัวเองไม่ค่อยได้ใช้และดึงข้อมูลได้อย่างมีประสิทธิภาพ

นี่คือคำแนะนำที่ดี ขอบคุณ @Prestaul

หากคุณใช้ jQuery อยู่แล้วคุณควรใช้ประโยชน์จากวิธี "data" ซึ่งเป็นวิธีที่แนะนำสำหรับการเก็บข้อมูลโดยพลการบนองค์ประกอบ dom ด้วย jQuery

จริงมาก แต่ถ้าคุณต้องการจัดเก็บข้อมูลตามอำเภอใจใน HTML แบบธรรมดา? นี่คือทางเลือกอื่น ...

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

ใส่ข้อมูลของคุณในชื่อและคุณลักษณะค่าขององค์ประกอบอินพุตที่ซ่อนอยู่ สิ่งนี้อาจมีประโยชน์หากเซิร์ฟเวอร์กำลังสร้าง HTML (เช่นสคริปต์ PHP หรืออะไรก็ตาม) และรหัส JavaScript ของคุณจะใช้ข้อมูลนี้ในภายหลัง

เป็นที่ยอมรับไม่ใช่ความสะอาด แต่เป็นทางเลือก มันเข้ากันได้กับเบราว์เซอร์ทั้งหมดและเป็น XHTML ที่ถูกต้อง คุณไม่ควรใช้แอตทริบิวต์ที่กำหนดเองและคุณไม่ควรใช้แอตทริบิวต์กับคำนำหน้า 'data-' เนื่องจากอาจไม่สามารถใช้งานได้กับเบราว์เซอร์ทั้งหมด และนอกจากนี้เอกสารของคุณจะไม่ผ่านการตรวจสอบ W3C

คุณสามารถใช้คำนำหน้าข้อมูลของแอตทริบิวต์ที่สร้างขึ้นของคุณเองขององค์ประกอบแบบสุ่ม ( <span data-randomname="Data goes here..."></span>) แต่สิ่งนี้ใช้ได้ใน HTML5 เท่านั้น ดังนั้นเบราว์เซอร์อาจบ่นเกี่ยวกับความถูกต้อง

คุณสามารถใช้<span style="display: none;">Data goes here...</span>แท็ก แต่ด้วยวิธีนี้คุณไม่สามารถใช้ฟังก์ชั่นแอททริบิวต์ได้และหากปิด css และ js นี่ก็ไม่ใช่วิธีการแก้ปัญหาที่เป็นระเบียบเช่นกัน

แต่สิ่งที่ฉันชอบเป็นการส่วนตัวมีดังต่อไปนี้:

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

อินพุตจะถูกซ่อนในทุกกรณีแอตทริบิวต์นั้นถูกต้องสมบูรณ์และจะไม่ถูกส่งหากอยู่ใน<form>แท็กเนื่องจากยังไม่มีชื่อใช่ไหม เหนือสิ่งอื่นใดคุณลักษณะต่างๆนั้นง่ายต่อการจดจำและรหัสนั้นดูดีและเข้าใจง่าย คุณยังสามารถใส่รหัสแอตทริบิวต์ในนั้นเพื่อให้คุณสามารถเข้าถึงได้อย่างง่ายดายด้วย JavaScript input.title; input.valueเป็นอย่างดีและการเข้าถึงคู่ค่าคีย์ด้วย

ความเป็นไปได้อย่างหนึ่งคือ:

• สร้าง div ใหม่เพื่อเก็บข้อมูลส่วนขยาย / ข้อมูลโดยพลการทั้งหมด
• ทำบางสิ่งบางอย่างเพื่อให้แน่ใจว่า div นี้ไม่สามารถมองเห็นได้ (เช่น CSS บวกแอตทริบิวต์ class ของ div)
• ใส่ข้อมูลที่ขยายเพิ่ม / โดยพลการไว้ในแท็ก HTML [X] (เช่นข้อความภายในเซลล์ของตารางหรือสิ่งอื่นที่คุณอาจต้องการ) ภายใน div ที่มองไม่เห็นนี้

วิธีการอื่นสามารถเก็บคีย์ได้: คู่ค่าเป็นคลาสแบบง่ายโดยใช้ไวยากรณ์ต่อไปนี้:

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

สิ่งนี้ถูกต้องและสามารถเรียกคืนได้อย่างง่ายดายด้วยตัวเลือก jQuery หรือฟังก์ชันที่กำหนดเอง

ที่นายจ้างคนก่อนของฉันเราใช้แท็ก HTML ที่กำหนดเองตลอดเวลาเพื่อเก็บข้อมูลเกี่ยวกับองค์ประกอบของแบบฟอร์ม ที่จับ: เรารู้ว่าผู้ใช้ถูกบังคับให้ใช้ IE

มันไม่ได้ผลสำหรับ FireFox ในเวลานั้น ฉันไม่รู้ว่า FireFox เปลี่ยนแปลงสิ่งนี้หรือไม่ แต่โปรดทราบว่าการเพิ่มคุณสมบัติของคุณเองไปยังองค์ประกอบ HTML อาจจะสนับสนุนเบราว์เซอร์ของผู้อ่านของคุณหรือไม่ก็ได้

หากคุณสามารถควบคุมเบราว์เซอร์ที่ผู้อ่านของคุณใช้ (เช่นแอปเพล็ตเว็บภายในสำหรับ บริษัท ) จากนั้นลองใช้ดู มันจะเจ็บอะไรใช่มั้ย

นี่คือวิธีที่ฉันทำคุณ Ajax หน้า ... มันเป็นวิธีที่ง่าย ...

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

มันทำงานอย่างไรโดยปกติแล้วมันจะดู URL ทั้งหมดที่มีคลาส 'ajx' และแทนที่คำหลักและเพิ่ม # sign ... ดังนั้นหากปิด js แล้ว URL จะทำหน้าที่เหมือนปกติ ... ทั้งหมด " แอป "(แต่ละส่วนของเว็บไซต์) มีคำหลักของตัวเอง ... ดังนั้นสิ่งที่ฉันต้องทำคือเพิ่มลงในอาร์เรย์ js ด้านบนเพื่อเพิ่มหน้าเพิ่มเติม ...

ตัวอย่างเช่นการตั้งค่าปัจจุบันของฉันถูกตั้งค่าเป็น:

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

ดังนั้นถ้าฉันมี URL เช่น:

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

สคริปต์ js จะแทนที่ / ads / part ดังนั้น URL ของฉันก็จะกลายเป็น

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

จากนั้นฉันใช้ปลั๊กอิน jquery bbq เพื่อโหลดหน้าเว็บตามลำดับ ...

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

ฉันพบว่าปลั๊กอินเมทาดาทาเป็นทางออกที่ยอดเยี่ยมสำหรับปัญหาการจัดเก็บข้อมูลโดยพลการด้วยแท็ก html ในวิธีที่ทำให้ง่ายต่อการดึงและใช้กับ jQuery

สำคัญ : ไฟล์จริงที่คุณรวมมีเพียง5 kb และไม่ใช่37 kb (ซึ่งเป็นขนาดของแพ็คเกจดาวน์โหลดที่สมบูรณ์)

นี่คือตัวอย่างของการใช้เพื่อเก็บค่าที่ฉันใช้เมื่อสร้างเหตุการณ์การติดตามการวิเคราะห์ของ Google (หมายเหตุ: data.label และ data.value เป็นพารามิเตอร์เสริม)

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

ใน html เราสามารถจัดเก็บแอตทริบิวต์ที่กำหนดเองด้วยคำนำหน้า 'data-' หน้าชื่อแอตทริบิวต์เช่น

<p data-animal='dog'>This animal is a dog.</p>. ตรวจสอบเอกสาร

เราสามารถใช้คุณสมบัตินี้เพื่อตั้งค่าและรับคุณสมบัติแบบไดนามิกโดยใช้ jQuery like: หากเรามี ap tag like

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

จากนั้นเพื่อสร้างแอตทริบิวต์ที่เรียกว่า 'สายพันธุ์' สำหรับแท็กด้านบนเราสามารถเขียน:

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

เพื่อดึงข้อมูลทุกเวลาเราสามารถเขียน:

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

ตราบใดที่คุณทำงานจริงเสร็จแล้วจะมีเซิร์ฟเวอร์อยู่ทำไมคุณต้องใช้ข้อมูลที่กำหนดเองในแท็ก html ในผลลัพธ์ สิ่งที่คุณต้องรู้กลับไปบนเซิร์ฟเวอร์คือดัชนีในรายการโครงสร้างที่มีข้อมูลที่คุณกำหนดเอง ฉันคิดว่าคุณกำลังมองหาที่จะเก็บข้อมูลในสถานที่ที่ไม่ถูกต้อง

ฉันจะจำได้ แต่โชคไม่ดีที่ในหลาย ๆ กรณีทางออกที่ถูกต้องไม่ใช่ทางออกที่ถูกต้อง ในกรณีนี้ฉันขอแนะนำให้สร้างจาวาสคริปต์เพื่อเก็บข้อมูลเพิ่มเติม

หลายปีต่อมา:

คำถามนี้ถูกโพสต์ไว้ประมาณสามปีก่อนที่data-...คุณสมบัติจะกลายเป็นตัวเลือกที่ถูกต้องกับการถือกำเนิดของ html 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>