Bạn đang xem : jquery thay đổi màu của phần tử

Tôi mới sử dụng jQuery và tôi cần trợ giúp. Đối với dự án nhóm của chúng tôi ở trường Đại học, chúng tôi đang tạo một ứng dụng di động tạo ghi chú để bạn có thể thêm tiêu đề, nội dung, v.v.

Trong đối tượng ghi chú, chúng tôi muốn thêm một nút cho phép người dùng thay đổi màu của nền ghi chú, sử dụng một loạt 5 màu khác nhau: đỏ, xanh lam, xanh lục, cam, tím.

Đây là thiết kế của ghi chú: http://imgur.com/a/ownxe

Bây giờ, đây là những gì sẽ xảy ra khi bạn nhấp vào nút Màu: http://imgur.com/a/17Pet

Tôi muốn làm cho nó như vậy, khi một trong các màu được nhấp vào, màu của ghi chú sẽ thay đổi thành màu đó và cửa sổ bật lên của nút sẽ đóng lại.

Bạn có thể giúp tôi không? Tôi làm nó như thế nào? Đây là mã:

  function addNewNote (className, title, content) {
    // nếu lớp không được chỉ định, hãy sử dụng lớp màu ngẫu nhiên
    if (! className) {
        className = "color" + Math.ceil (Math.random () * 5);
    }

    // thêm ghi chú mới vào cuối danh sách
    Notes.append (
        "& lt; li & gt;" +
            "& lt; div class = '" + className + "' & gt;" +
                "& lt; img class = 'hide' src = 'images / close.png' / & gt;" +
                "& lt; textarea class = 'note-title' placeholder = 'Ghi chú mới' maxlength = '10 '/ & gt;" +
                "& lt; textarea class = 'note-content' placeholder = 'Bắt ​​đầu nhập ...' / & gt;" +
                "& lt; nút & gt;" +
                    "& lt; a href = '# myPopup' data-rel = 'popup' class = 'note-button' & gt; Màu & lt; / a & gt;" +
                    "& lt; div data-role = 'popup' id = 'myPopup' & gt;" +
                        "& lt; h5 & gt; Chọn màu: & lt; / h5 & gt;" +
                        "& lt; a href class = 'red' & gt; Red & lt; / a & gt;" +
                        "& lt; a href class = 'green' & gt; Green & lt; / a & gt;" +
                        "& lt; a href class = 'blue' & gt; Blue & lt; / a & gt;" +
                        "& lt; a href class = 'orange' & gt; Orange & lt; / a & gt;" +
                        "& lt; a href class = 'Purple' & gt; Purple & lt; / a & gt;" +
                    "& lt; / div & gt;" +
                "& lt; / nút & gt;" +
            "& lt; / div & gt;" +
        "& lt; / li & gt;"
    );

    // lấy ghi chú mới vừa được thêm vào và đính kèm trình xử lý sự kiện nhấp chuột vào nút đóng của nó
    var newNote = Notes.find ("li: last");
    newNote.find ("img"). click (function () {
        // xóa ghi chú và lưu
        newNote.remove ();
        saveNotes ();
    });

    // kết nối các trình xử lý sự kiện để hiển thị / ẩn nút đóng khi thích hợp
    addNoteEvent (newNote);

    // nếu tiêu đề được cung cấp thì hãy đặt tiêu đề của ghi chú mới
    nếu (tiêu đề) {
        // lấy phần tử textarea tiêu đề và đặt giá trị của nó
        newNote.find ("textarea.note-title"). val (title);
    }

    // nếu một nội dung được cung cấp thì hãy đặt nội dung của ghi chú mới
    if (nội dung) {
        // lấy phần tử textarea nội dung và đặt giá trị của nó
        newNote.find ("textarea.note-content"). val (content);
    }

    // tiết kiệm
    saveNotes ();
}
 

Mọi thứ đều được thêm vào ghi chú thông qua Notes.append () và mọi thứ khác được nhận xét, hy vọng nó có thể giúp bạn hiểu cách hoạt động của nó.

Xem Thêm  Siêu liên kết HTML với hình ảnh - html để siêu liên kết một hình ảnh

Lúc đầu, nó tạo màu một cách ngẫu nhiên cho một ghi chú với dòng:

  // nếu lớp không được chỉ định, hãy sử dụng lớp màu ngẫu nhiên
if (! className) {
    className = "color" + Math.ceil (Math.random () * 5);
}
 

Trong CSS, có ul li div.colour1 , ul li div.colour2 , v.v. cho đến 5. (Không thể đăng ảnh chụp màn hình, tôi không có 10 lần đại diện)

Tôi có thể làm điều đó bằng cách nào?

Xin lỗi vì bài đăng dài và tôi hy vọng nó có thể hiểu được. Nếu cần, hãy đặt câu hỏi.


Xem thêm những thông tin liên quan đến chủ đề jquery thay đổi màu của phần tử

jQuery Tutorial #4 – DOM Traversal with jQuery

  • Tác giả: LearnCode.academy
  • Ngày đăng: 2014-06-10
  • Đánh giá: 4 ⭐ ( 9275 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Lots of jobs require you to be good at DOM traversal. This jQuery tutorial focuses on using jQuery as a DOM traversal library – which is where jQuery really shines.

    The DOM (Document Object Model) is all of the html elements that get generated when your browser reads the html file. DOM traversal is finding elements or groups of elements and manipulating them to change the state of the web page.

    You may read job posts looking for a “DOM traversal ninja”, or someone who’s “skilled at advanced DOM traversal” or “Bends the DOM to your will”…that’s what we’ll be learning in this jQuery tutorial for beginners.

    Lesson 1: jQuery Tutorial for Beginners
    https://www.youtube.com/watch?v=hMxGhHNOkCU

    Lesson 2: Listen to user events and respond with jQuery actions!
    https://www.youtube.com/watch?v=G-POtu9J-m4

    Lesson 3: Clean up the jQuery by putting some data in the HTML
    https://www.youtube.com/watch?v=Cc3K2jDdKTo

    Lesson 5: Build a jQuery Panel Widget
    https://www.youtube.com/watch?v=1nWrIBB_bMA

    -~-~~-~~~-~~-~-
    Also watch: “Responsive Design Tutorial – Tips for making web sites look great on any device”
    https://www.youtube.com/watch?v=fgOO9YUFlGI
    -~-~~-~~~-~~-~-

Tham khảo jQuery

  • Tác giả: hocwebchuan.com
  • Đánh giá: 4 ⭐ ( 999 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm jQuery giúp bạn củng cố thêm kiến thức và hiểu rõ hơn những gì bạn đã học – Học Web Chuẩn

Phương thức replaceWith() trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 4044 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng phương thức replaceWith() trong jQuery để thay thế các phần tử được chọn bởi một một nội dung khác

[JQuery tutorial] Cách dùng JQuery để thay đổi nội dung trang web

  • Tác giả: hocphp.net
  • Đánh giá: 4 ⭐ ( 8771 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Làm cách nào để thay đổi màu nền bằng JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 3905 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Sửa đổi thuộc tính JavaScript document.body.style.background. Ví dụ: function changeBackground(color) { document.body.style.background = color; } window.addEventListener(“load”,function()…

Thay đổi màu thành phần

  • Tác giả: www.hiepsiit.com
  • Đánh giá: 4 ⭐ ( 3919 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Jquery – Thay đổi màu khi nhấp vào [trùng lặp]

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 2690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  DELETE (Transact-SQL) - Máy chủ SQL - máy chủ sql xóa hàng

By ads_php