التعامل مع خصائص البيانات

<div id="product"
     data-id="12345"
     data-name="Laptop"
     data-price="999.99"
     data-in-stock="true"
     data-category="electronics">
    MacBook Pro
</div>

// الحصول على خاصية بيانات واحدة
var productId = $("#product").data("id");
console.log(productId); // "12345"

var price = $("#product").data("price");
console.log(price); // "999.99"

// الحصول على جميع خصائص البيانات ككائن
var allData = $("#product").data();
console.log(allData);
// {id: "12345", name: "Laptop", price: "999.99", inStock: "true", category: "electronics"}

// تعيين قيمة بيانات واحدة
$("#product").data("discount", "10%");

// تعيين قيم بيانات متعددة
$("#product").data({
    seller: "TechStore",
    warranty: "2 years",
    rating: 4.5
});

// البيانات محفوظة في ذاكرة jQuery الداخلية
console.log($("#product").data("seller")); // "TechStore"

<div id="demo"
     data-string="hello"
     data-number="42"
     data-float="3.14"
     data-boolean="true"
     data-null="null"
     data-json='{"name":"أحمد","age":30}'>
</div>

var string = $("#demo").data("string");
console.log(typeof string); // "string"

var number = $("#demo").data("number");
console.log(typeof number); // "number"

var float = $("#demo").data("float");
console.log(typeof float); // "number"

var boolean = $("#demo").data("boolean");
console.log(typeof boolean); // "boolean"

var nullValue = $("#demo").data("null");
console.log(nullValue); // null

var json = $("#demo").data("json");
console.log(typeof json); // "object"
console.log(json.name); // "أحمد"

<div id="user"
     data-first-name="أحمد"
     data-last-name="محمد"
     data-user-id="123">
</div>

// الوصول باستخدام الحالة الجملية
var firstName = $("#user").data("firstName");  // "أحمد"
var lastName = $("#user").data("lastName");    // "محمد"
var userId = $("#user").data("userId");        // "123"

// التعيين باستخدام الحالة الجملية
$("#user").data("fullName", "أحمد محمد");

// هذا ينشئ data-full-name في ذاكرة jQuery

// إزالة عنصر بيانات واحد
$("#product").removeData("discount");

// إزالة عناصر بيانات متعددة
$("#product").removeData("seller warranty");

// إزالة جميع البيانات
$("#product").removeData();

<div class="products">
    <div class="product-card"
         data-id="1"
         data-name="ماوس لاسلكي"
         data-price="29.99"
         data-image="mouse.jpg"
         data-stock="15">
        <h3>ماوس لاسلكي</h3>
        <button class="view-details">عرض التفاصيل</button>
        <button class="add-to-cart">إضافة للسلة</button>
    </div>

    <div class="product-card"
         data-id="2"
         data-name="لوحة مفاتيح ميكانيكية"
         data-price="79.99"
         data-image="keyboard.jpg"
         data-stock="8">
        <h3>لوحة مفاتيح ميكانيكية</h3>
        <button class="view-details">عرض التفاصيل</button>
        <button class="add-to-cart">إضافة للسلة</button>
    </div>
</div>

<div id="product-modal" style="display: none;">
    <h2 id="modal-name"></h2>
    <img id="modal-image" src="" alt="">
    <p>السعر: $<span id="modal-price"></span></p>
    <p>متوفر: <span id="modal-stock"></span></p>
    <button id="close-modal">إغلاق</button>
</div>

$(document).ready(function() {
    // عرض تفاصيل المنتج
    $(".view-details").click(function() {
        var card = $(this).closest(".product-card");
        var productData = card.data();

        $("#modal-name").text(productData.name);
        $("#modal-price").text(productData.price);
        $("#modal-stock").text(productData.stock);
        $("#modal-image").attr({
            src: "images/" + productData.image,
            alt: productData.name
        });

        $("#product-modal").show();
    });

    // إضافة إلى السلة
    $(".add-to-cart").click(function() {
        var card = $(this).closest(".product-card");
        var productData = card.data();

        // تخزين بيانات عنصر السلة
        var cartItem = {
            id: productData.id,
            name: productData.name,
            price: productData.price,
            quantity: 1
        };

        // إضافة تغذية راجعة مرئية
        card.data("in-cart", true);
        $(this).text("تمت الإضافة!").prop("disabled", true);

        console.log("تمت الإضافة إلى السلة:", cartItem);

        // إعادة التفعيل بعد ثانيتين
        setTimeout(function() {
            $(this).text("إضافة للسلة").prop("disabled", false);
        }.bind(this), 2000);
    });

    // إغلاق النافذة المنبثقة
    $("#close-modal").click(function() {
        $("#product-modal").hide();
    });
});

<div class="tab-container">
    <button class="tab-btn active" data-tab="home" data-icon="🏠">الرئيسية</button>
    <button class="tab-btn" data-tab="about" data-icon="ℹ️">من نحن</button>
    <button class="tab-btn" data-tab="services" data-icon="⚙️">الخدمات</button>
    <button class="tab-btn" data-tab="contact" data-icon="📧">اتصل بنا</button>
</div>

<div id="tab-content">
    <div class="tab-panel active" id="home">محتوى الرئيسية</div>
    <div class="tab-panel" id="about">محتوى من نحن</div>
    <div class="tab-panel" id="services">محتوى الخدمات</div>
    <div class="tab-panel" id="contact">محتوى اتصل بنا</div>
</div>

$(document).ready(function() {
    $(".tab-btn").click(function() {
        var tabId = $(this).data("tab");
        var tabIcon = $(this).data("icon");

        // إزالة الفئة النشطة من جميع التبويبات واللوحات
        $(".tab-btn").removeClass("active");
        $(".tab-panel").removeClass("active");

        // إضافة الفئة النشطة للتبويب المنقور واللوحة المقابلة
        $(this).addClass("active");
        $("#" + tabId).addClass("active");

        // تخزين التبويب الحالي في البيانات
        $(".tab-container").data("currentTab", tabId);

        // تسجيل التحليلات
        console.log("تم عرض التبويب:", tabId, tabIcon);

        // تخزين عدد المشاهدات
        var viewCount = $(this).data("viewCount") || 0;
        $(this).data("viewCount", viewCount + 1);
        console.log("تمت مشاهدة هذا التبويب " + (viewCount + 1) + " مرات");
    });

    // التهيئة بتبويب الرئيسية
    $(".tab-container").data("currentTab", "home");
});

<div class="slider"
     data-autoplay="true"
     data-interval="3000"
     data-loop="true"
     data-animation="fade">
    <!-- محتوى السلايدر -->
</div>

$(document).ready(function() {
    $(".slider").each(function() {
        var config = $(this).data();

        console.log("إعدادات السلايدر:", config);
        // {autoplay: true, interval: 3000, loop: true, animation: "fade"}

        if (config.autoplay) {
            // بدء التشغيل التلقائي بالفاصل الزمني المحدد
            setInterval(function() {
                // منطق الانزلاق هنا
            }, config.interval);
        }

        // تطبيق نمط الحركة
        $(this).attr("data-animation-style", config.animation);
    });
});