9.3.24 |
2
nhận xét
|
lượt xem
Trong các ứng dụng tin nhắn, hay các bài viết ở forum thường có chức năng ghim nội dung bài viết, hình ảnh quan trọng nhằm tạo sự chú ý, nhắc nhở hoặc nhấn mạnh tới người khác. Và ở bài viết này mình sẽ hướng dẫn một thủ thuật nhỏ để áp dụng được việc này cho phần nhận xét của blogspot
Xem Demo tại phần nhận xét ở bài viết này
Cách thức hoạt động
Nói qua một chút về cách thức để đẩy một nhận xét lên trên cùng ta sẽ áp dụng cấu trúc như sauVí dụ ta có đoạn HTML sau
<ol> <li>dòng số 1</li> <li>dòng số 2</li> <li>dòng số 3</li> <li>dòng số 4</li> <li>dòng số 5</li> </ol>Vậy làm sao để dòng số 5 đẩy lên trên cùng? Ta sẽ áp dụng đoạn CSS sau
ol { display: flex; flex-direction: column; } .pin-cmt { order: -1; /* Đặt order là -1 để đưa mục có class "pin-cmt" lên trên cùng */ }Sau đó ta phải gắn cho thẻ li chứa nội dung dòng số 5 một class là "pin-cmt" như sau
<ol>
<li>dòng số 1</li>
<li>dòng số 2</li>
<li>dòng số 3</li>
<li>dòng số 4</li>
<li class="pin-cmt">dòng số 5</li>
</ol>
Và bằng JS ta sẽ cho nhận biết rằng nhận xét muốn ghim sẽ nội dung là "dòng số 5" để gắn class "pin-cmt" vào cho nó
document.addEventListener("DOMContentLoaded", function() { var listItems = document.querySelectorAll("li"); listItems.forEach(function(item) { if (item.textContent.trim() === "dòng số 5") { item.classList.add("pin-cmt"); } }); });
Áp dụng thực tế
Phía trên chỉ là một ví dụ đơn giản thôi, trên thực tế phần nhận xét của blogspot phức tạp hơn nhiều. Nhưng chỉ cần biết được cách thức hoạt động của nó chúng ta hoàn toàn có thể kiểm soát đượcVà khi gắn được thêm class "pin-cmt" vào nhận xét rồi thì ta có thể dùng CSS để làm cho nó đặc biệt hơn so với những nhận xét khác ngoài việc nó làm ở trên cùng 😁
Như ở Demo về thủ thuật tại bài viết này, mình còn gắn thêm một điều kiện nữa là kiểm tra xem <li> có chứa một phần tử con có class là "comment-admin" không đồng thời trong nội dung có chứa từ "[pin]" hay không thì mới áp dụng thêm class "pin-cmt" cho <li> nhằm mục đích chỉ cho phép admin của blog mới có quyền ghim nhận xét
Anh em thử nhé, nếu có thắc mắc cùng để lại nhận xét để hoàn thiện hơn nhé, bye! 👌
[pin]
REPLY DELETEỞ nhận xét này đã được ghim lên trên cùng 😁
Hay quá người anh em ơi
REPLY DELETE