องค์ประกอบกรองตาม. data () คีย์ / ค่า

สมมติว่าฉันมีองค์ประกอบ div 4 รายการพร้อมคลาส.navlinkซึ่งเมื่อคลิกใช้.data()เพื่อตั้งค่าคีย์ที่เรียกว่า'selected'เป็นค่าtrue:

$('.navlink')click(function() { $(this).data('selected', true); })

ทุกครั้งที่มีการ.navlinkคลิกใหม่ฉันต้องการจัดเก็บสิ่งที่เลือกไว้ก่อนหน้านี้navlinkเพื่อการปรับแต่งในภายหลัง มีวิธีที่ง่ายและรวดเร็วในการเลือกองค์ประกอบตามสิ่งที่จัดเก็บโดยใช้.data()หรือไม่?

ดูเหมือนจะไม่มี jQuery : ตัวกรองที่พอดีกับใบเรียกเก็บเงินและฉันได้ลองสิ่งต่อไปนี้ (ภายในเหตุการณ์การคลิกเดียวกัน) แต่ด้วยเหตุผลบางประการมันไม่ได้ผล:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

ฉันรู้ว่ามีวิธีอื่นในการทำให้สำเร็จ แต่ตอนนี้ส่วนใหญ่ฉันแค่อยากรู้ว่ามันทำได้.data()ไหม

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

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

สำหรับบันทึกคุณสามารถกรองข้อมูลด้วย jquery (คำถามนี้ค่อนข้างเก่าและ jQuery พัฒนาตั้งแต่นั้นมาจึงถูกต้องที่จะเขียนวิธีแก้ปัญหานี้ด้วย):

$('.navlink[data-selected="true"]');

หรือดีกว่า (เพื่อประสิทธิภาพ):

$('.navlink').filter('[data-selected="true"]');

หรือหากคุณต้องการรับองค์ประกอบทั้งหมดด้วยdata-selectedชุด:

$('[data-selected]')

โปรดทราบว่าวิธีนี้จะใช้ได้เฉพาะกับข้อมูลที่ตั้งค่าผ่าน html-attributes หากคุณตั้งค่าหรือเปลี่ยนแปลงข้อมูลด้วยการ.data()โทรวิธีนี้จะใช้ไม่ได้อีกต่อไป

เราสามารถสร้างปลั๊กอินได้อย่างง่ายดาย:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

การใช้งาน (ตรวจสอบปุ่มตัวเลือก):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

สองสิ่งที่ฉันสังเกตเห็น (อาจเป็นข้อผิดพลาดจากตอนที่คุณจดไว้)

1. คุณพลาดจุดในตัวอย่างแรก ( $('.navlink').click)
2. เพื่อให้ตัวกรองทำงานคุณต้องส่งคืนค่า ( return $(this).data("selected")==true)

ฟังดูเวิร์คเกินคุ้ม

1) ทำไมไม่เพียงแค่มีตัวแปร JavaScript เดียวที่เก็บข้อมูลอ้างอิงไปยังวัตถุ element \ jQuery ที่เลือกในปัจจุบัน

2) ทำไมไม่เพิ่มคลาสให้กับองค์ประกอบที่เลือกในปัจจุบัน จากนั้นคุณสามารถค้นหา DOM สำหรับคลาส ".active" หรืออะไรก็ได้