تحسين تفاعل المستخدم: إضافة وحذف عناصر بسهولة باستخدام jQuery
عند النظر إلى الكود الخاص بك، يظهر أنك تعمل على إضافة زر حذف (delete button) لكل عنصر جديد تقوم بإنشائه، مما يتيح للمستخدم حذف العناصر بشكل فردي دون التأثير على العناصر الأخرى في الصفحة. ومع ذلك، هناك بعض التصحيحات والتعديلات التي يمكن إجراؤها على الكود لتحسينه.
أولاً، لاحظت بعض الأخطاء في الكود:
- في خاصية
height، كتبتها بشكل خاطئ في الـ CSS للعناصر.my-itemو.item-header. يجب أن تكون “height” بدلاً من “heigth”. - تحتاج لإضافة فاصلة منقوطة (
;) بين قيمتي العرض والارتفاع في خاصية CSS. - يجب عليك تعديل الطريقة التي تقوم بها بإضافة زر الحذف (
Delete button) لكل عنصر. يمكنك استخدامappendبطريقة مختلفة لإضافة الزر بشكل صحيح.
فيما يلي إصلاحات للكود:
htmlHTML>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Demotitle>
<style>
.my-item {
width: 250px;
height: 180px;
margin: 10px;
padding: 20px;
background: green;
border: 2px solid black;
}
.item-header {
width: 150px;
height: 120px;
margin: 5px;
padding: 10px;
background: yellow;
border: 1px solid black;
}
.item-body {
width: 70px;
height: 50px;
margin: 3px;
padding: 5px;
background: purple;
border: 1px solid black;
}
.deleteButton {
background: red;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
}
style>
<script src="http://code.jquery.com/jquery-latest.min.js">script>
<script>
$(document).ready(function () {
$("#divButton").click(function () {
$(".my-item").clone().appendTo("body");
});
$("#toggle").click(function () {
if ($(".item-body").is(":visible")) {
$(".item-body").slideUp("normal");
} else {
$(".item-body").slideDown("normal");
}
});
$(document).on("click", ".deleteButton", function () {
$(this).closest(".my-item").remove();
});
});
script>
head>
<body>
<div class="my-item">
<div class="item-header">
<h2 id="toggle">Click Me!h2>
<div class="item-body">My Text!div>
div>
<button class="deleteButton">Deletebutton>
div>
<button id="divButton">Click!button>
body>
html>
هذا الكود يحل الأخطاء المذكورة أعلاه ويستخدم الحدث click لحذف العنصر المحتوي على الزر Delete بشكل فعّال.
المزيد من المعلومات
بالتأكيد، دعنا نوسع على المعلومات المتعلقة بالكود وكيف يعمل.
في هذا الكود، قمت بتكوين صفحة HTML بسيطة تحتوي على عنصر div بفئة .my-item، وهو العنصر الذي ستتم إضافته ونسخه عند النقر على الزر “Click!” (#divButton). يتم إنشاء عنصر داخلي بفئة .item-header يحتوي على عنوان h2 وعنصر آخر بفئة .item-body. يتم تحكم في إظهار وإخفاء العنصر .item-body باستخدام الزر الموسوم بـ “Click Me!” (#toggle).
تمت إضافة زر Delete بواسطة الزر الثاني “Delete!” (#deleteButton). ومن أجل التعامل مع حدث النقر على هذا الزر، قمت باستخدام الطريقة $(document).on("click", ".deleteButton", function () {})، حيث يمكن استدعاء هذا الحدث لحذف العنصر الذي يحتوي على الزر Delete.
كما قمت بتصحيح الأخطاء في الكود CSS، حيث قمت بتصحيح “heigth” إلى “height” وأضفت فواصل منقوطة في الأماكن الصحيحة.
يهدف هذا الكود إلى إظهار كيفية إضافة وحذف عناصر بشكل دينامي على الصفحة باستخدام jQuery. الزر “Click!” يقوم بنسخ العنصر .my-item وإضافته إلى الصفحة، بينما الزر “Delete!” يحذف العنصر الفردي الذي يحتوي على الزر Delete المضاف له.
