يوضح:
انقر فوق فقرة النص وقم بتغيير النص إلى اللون الأحمر. بعد النقر مرة أخرى ، سيعود النص إلى الأسود.
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> اختبار jQuery </title>
<script src = "jquery-1.11.1.min.js"> </script>
<type type = "text/css">
.أحمر
{
اللون: أحمر.
}
</style>
</head>
<body>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<script type = "text/javaScript">
$ ("p"). انقر فوق (function () {
if ($ (this) .hasclass ("Red")) {// judge ما إذا كان لديه هذا الفصل
$ (هذا) .removeclass ("أحمر") ؛
}آخر{
$ (this) .addClass ("Red") ؛
}
})
</script>
</body>
</html>
نظرًا لأن هذه عملية من الفئات المتناوبة ، يمكنك استخدام طريقة ToggleClass. إذا كانت الفئة المقابلة: "Red" موجودة ، فسيتم إزالتها. إذا لم يكن موجودًا ، فسيتم إضافته.
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> اختبار jQuery </title>
<script src = "jquery-1.11.1.min.js"> </script>
<type type = "text/css">
.أحمر
{
اللون: أحمر.
}
</style>
</head>
<body>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<p> التعلم يشبه الإبحار ضد التيار ، إذا لم تقدم ، فسوف تتراجع </p>
<script type = "text/javaScript">
$ ("p"). انقر فوق (function () {
$ (هذا) .Toggleclass ("Red") ؛
})
</script>
</body>
</html>