programming javascript

JavaScript ẩn/hiện nhiều div có cùng id

tương tự như. trống [], các. phương thức remove[] lấy các phần tử ra khỏi DOM. Sử dụng. remove[] khi bạn muốn gỡ bỏ chính phần tử đó, cũng như mọi thứ bên trong nó. Ngoài bản thân các phần tử, tất cả các sự kiện ràng buộc và dữ liệu jQuery được liên kết với các phần tử đều bị xóa

Từ trang jQuery Selector id. Mỗi giá trị id chỉ được sử dụng một lần trong tài liệu. Nếu có nhiều phần tử được gán cùng một ID, các truy vấn sử dụng ID đó sẽ chỉ chọn phần tử khớp đầu tiên trong DOM. Tuy nhiên, không nên dựa vào hành vi này;

Phương thức remove[] loại bỏ các phần tử đã chọn, bao gồm tất cả các nút văn bản và nút con. Phương pháp này cũng loại bỏ dữ liệu và sự kiện của các yếu tố được chọn. Mẹo. Để xóa các phần tử mà không xóa dữ liệu và sự kiện, thay vào đó hãy sử dụng phương thức detach[]

Hàm jQuery $[ ] là hàm jQuery chính được gọi cho hầu hết các hoạt động của jQuery. Chuỗi được chuyển đến $[ ], trong ví dụ này là “DIVtarget”, được gọi là bộ chọn. Nó yêu cầu hàm $[ ] tìm kiếm trong Mô hình đối tượng tài liệu [DOM] để tìm bất kỳ đối tượng nào khớp với bộ chọn được cung cấp – ở đây là DIV với “DIVtarget” làm ID

jQuery đang nối vào các lớp này để hiển thị và ẩn các trình bao bọc khác nhau tùy thuộc vào tiêu đề nào đang được di chuột vào. Ví dụ này dành cho trình bao bọc một. Nó nhắm mục tiêu. hoverReveal1 sau đó chạy hàm để hiển thị trình bao bọc một nhưng ẩn trình bao bọc hai và ba. Mã này sau đó được sao chép thêm hai lần nữa để nhắm mục tiêu các trình bao bọc khác

Tất cả những gì cần thiết để tập lệnh hoạt động là cung cấp cho bất kỳ phần tử nào [toàn bộ div, một đoạn, bất cứ thứ gì] một lớp CSS "chuyển đổi". Phần tử đứng trước [i. e. phần tử ngay phía trên đối tượng có lớp chuyển đổi] sẽ có liên kết hiển thị/ẩn được thêm vào đó

Nhấp vào "showDescription" sẽ hiển thị mô tả. nhấp lại vào cùng một "showDescription" sẽ ẩn Mô tả. Bạn có thể hiển thị thẻ neo "Ẩn mô tả" khi mô tả được mở rộng. ShotDriller 14-Sep-12 11. 48am Đã cập nhật chức năng/Mã được cung cấp. chỉ cần sao chép dán mã được cung cấp và kiểm tra. nếu đó là những gì bạn muốn

Phương pháp bạn sẽ sử dụng tùy thuộc vào vị trí của liên kết ẩn/hiện là một trong các phương pháp sau. jQuery. prev [] - Được sử dụng khi phần tử bạn muốn ẩn nằm trước liên kết ẩn/hiện jQuery

Hiển thị/Ẩn Div dựa trên Nút Radio với các giá trị được chọn, Hiển thị/Ẩn Div dựa trên Nút Radio với các giá trị được chọn sắp tới Nhiều … và tập lệnh được liên kết. $ [tài liệu]. sẵn sàng [hàm [] { Sử dụng jQuery show [] và ẩn [] để Hiển thị/Ẩn div trên nút radio đã chọn. Để làm điều này, bạn cần thêm một số kiểu, tập lệnh và một số HTML

Xin chào
Tôi cần ẩn/hiện nhiều div bằng cách nhấp vào liên kết. Về cơ bản, tôi muốn có một cái cho phép người dùng xem tất cả các div, sau đó là bốn cái chỉ chọn một trong bốn "loại" div của tôi [Cuộc họp, Bàn, Sự kiện, Khác]. Vấn đề với điều này mà tôi không thể giải quyết là trên trang tôi đang xây dựng, tôi sẽ có nhiều hơn một div cho mỗi loại - ví dụ: có thể là ba Cuộc họp, hai Bảng, bốn Sự kiện và một Sự kiện khác. Điều này cấm tôi sử dụng phương thức JavaScript bằng getElementById, vì id phải là cá nhân. Tôi đã googled câu hỏi này nhưng không có bất kỳ câu trả lời nào. Bất kỳ trợ giúp nào bạn có thể cung cấp sẽ được đánh giá rất cao.

Cho đến nay, bạn đã thêm phong cách cho các yếu tố khác nhau trong trang danh mục đầu tư của mình, nhưng các phong cách bạn đã thêm đã ảnh hưởng đến tất cả các yếu tố của một loại cụ thể. Ví dụ: khi bạn thêm kiểu vào phần tử div, nó ảnh hưởng đến tất cả các phần tử div như nhau. Điều gì sẽ xảy ra nếu bạn muốn cách điệu một số phần tử div theo cách này và các phần tử div khác theo cách khác? . Trong bài học này, bạn sẽ tìm hiểu cách sử dụng các thuộc tính ID và Lớp để tạo phong cách cho các phần tử riêng lẻ [id] hoặc nhóm các phần tử [lớp]

Kết quả của người học

Khi hoàn thành bài tập này

bạn sẽ có thể xác định cách các thuộc tính ID được sử dụng trong CSS để cho phép tạo kiểu cho các phần tử riêng lẻ
bạn sẽ có thể xác định cách các thuộc tính Lớp được sử dụng trong CSS để cho phép tạo kiểu cho các nhóm phần tử
bạn sẽ thêm các thuộc tính ID và Class vào các thành phần nhất định trong trang web

id là gì?

Trong HTML, mọi phần tử trên trang web của bạn có thể được gán một thuộc tính id duy nhất. Đây có thể là bất kỳ văn bản nào bạn thích, nhưng nó phải là duy nhất [chỉ một mặt hàng có thể có nhãn này]. Đó là một cách thực hành tốt để gán các nhãn mô tả chức năng của phần tử. Ví dụ, một

Bạn gán một thuộc tính id cho một phần tử HTML khi

Bạn muốn cách điệu phần tử đó khác với các phần tử khác cùng loại
Bạn muốn có thể liên kết đến một phần tử cụ thể trong một trang web. Trên thực tế, bạn đã thêm id="main" vào một trong các thành phần div trên trang danh mục đầu tư của mình khi bạn tạo liên kết "bỏ qua nội dung chính" trong bài học về Các loại liên kết đặc biệt
Bạn muốn có thể truy cập trực tiếp vào phần tử đó bằng Javascript. Bạn sẽ tìm hiểu thêm về điều đó trong mô-đun trên Javascript

Trong phần này, chúng tôi chỉ quan tâm đến lý do đầu tiên để thêm ID. Chúng tôi muốn có thể cách điệu các yếu tố cụ thể bằng CSS. Ví dụ: giả sử bạn có một đoạn văn đóng vai trò cảnh báo trên một trang. Bạn không muốn nó trông giống như tất cả các đoạn khác trên trang. Bạn muốn nó nổi bật để mọi người chắc chắn chú ý đến nó. Bạn có thể thêm id="alert" vào đoạn đó, như thế này

Important! All classes are cancelled today.

Để thêm kiểu cho phần tử có id, bạn đặt trước id bằng ký hiệu # trong CSS của mình. Ví dụ: đây là cách chúng tôi có thể làm cho đoạn cảnh báo của mình xuất hiện trong hộp lớn màu vàng có viền đen và văn bản lớn màu đen

  p#alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

Lưu ý rằng việc chỉ định loại phần tử trong CSS là tùy chọn khi phần tử có id. Trong ví dụ trên, chúng tôi sử dụng "p#alert" làm bộ chọn, cho trình duyệt biết rằng kiểu sau áp dụng cho đoạn có id "alert". Tuy nhiên, vì không có phần tử nào khác - đoạn văn hoặc cách khác - có cùng id đó, nên chúng ta có thể dễ dàng sử dụng "#alert" làm bộ chọn của mình mà không cần "p", như thế này

  #alert {
    color: black;
    font-weight: bold;
    background: #FFFF66; /* yellow */
    border: 2px solid black;
    padding: 1em;
  }

Nói chung, đó là một cách thực hành tốt để bao gồm phần tử vì nó giúp bạn nhớ phần tử nào có id nhất định. Đôi khi bạn sẽ muốn biết điều đó chỉ bằng cách xem tệp CSS mà không cần phải xem lại tệp HTML gốc

Đẳng cấp là gì?

Đôi khi có thể có một nhóm yếu tố mà bạn muốn cách điệu theo một cách nhất định. Ví dụ: giả sử bạn đang tạo một trang web giải trí bao gồm một số bài đánh giá phim, ngoài nội dung khác. Toàn bộ nội dung của mỗi bài đánh giá [một tiêu đề có tiêu đề phim, cộng với một số đoạn văn] được gói gọn trong một

để giữ tất cả cùng nhau trong một hộp. Đoạn đầu tiên của mỗi bài đánh giá là một đoạn tóm tắt ngắn mô tả bộ phim, sau đó tất cả các đoạn còn lại chứa nội dung bài phê bình của bạn về bộ phim. Bạn có thể muốn cách điệu hóa

các phần tử chứa từng bài đánh giá khác với các phần tử khác

các phần tử trên trang, vì vậy tất cả các bài đánh giá đều có giao diện khác biệt nhưng nhất quán với nhau. Bạn có thể thực hiện việc này bằng cách chỉ định class="review" cho từng bài đánh giá này. Ngoài ra, bạn có thể muốn đoạn tóm tắt có giao diện đặc biệt, khác với tất cả các đoạn khác. Bạn có thể thực hiện điều này bằng cách chỉ định class="summary" cho mỗi đoạn tóm tắt. Mã của bạn có thể trông giống như thế này.

The Godfather

The Godfather [1972] is the greatest movie of all time, according to numerous surveys of movie critics and audiences alike.

The Godfather is.. [your review here]

Avatar

Avatar [2009] is the highest grossing film of all time, earning approximately $2.8 billion.

Avatar is.. [your review here]

Để thêm phong cách cho tất cả các phần tử là một phần của một lớp cụ thể, bạn đặt trước tên lớp đó một dấu chấm [. ] trong CSS của bạn. Ví dụ: đây là cách chúng tôi có thể thêm nền xanh nhạt và viền xanh đậm cho tất cả các bài đánh giá phim và thêm chữ nghiêng cho tất cả các đoạn tóm tắt

  div.review {
    background-color: #E6EBF5; /* pale blue */
    border: 1px solid #003399; /* dark blue */
  }
  p.summary {
  	font-style: italic;
  }

Bộ chọn hậu duệ

Ngoài việc gán kiểu cho một lớp phần tử, bạn cũng có thể gán kiểu cho phần tử con của các phần tử đó. Hậu duệ là một phần tử được lồng bên trong một phần tử khác

Ví dụ: giả sử bạn muốn tất cả các thành phần [liên kết] trên một trang có màu đỏ và được gạch chân. Đây là cách bạn có thể thực hiện điều đó trong CSS

  a {
	  color: red;
	  text-decoration: underline;
  }

Tuy nhiên, giả sử bạn muốn có một kiểu khác cho các liên kết là một phần của menu điều hướng của bạn. Bạn muốn chúng có chữ trắng trên nền xanh đậm, không có gạch dưới. Giả sử các liên kết này được chứa trong một

  nav a {
	  color: white;
	  background-color: #003399; /* dark blue */
	  text-decoration: none;
  }

Trong ví dụ trên, điều hướng bộ chọn yêu cầu trình duyệt áp dụng định nghĩa kiểu cho mọi phần tử bên trong một

Trong ví dụ đánh giá phim, giả sử rằng hầu hết các đoạn trên trang giải trí của bạn có phần đệm được đặt thành 1em. Tuy nhiên, bạn muốn giảm phần đệm đó xuống 0. 75em cho tất cả các đoạn tạo nên phần đánh giá phim, để làm cho phần đánh giá trông chặt chẽ hơn một chút. Vì mỗi bài đánh giá phim đều được gói bên trong một

phần tử có class="review", bạn có thể dễ dàng tạo kiểu cho tất cả chúng bằng cách sử dụng bộ chọn hậu duệ, như thế này.

  div.review p {
	  padding: 0.75em;
  }

Các hoạt động

Mở chỉ mục danh mục đầu tư của bạn. html bằng trình soạn thảo văn bản của bạn
Xem lại nội dung trang của bạn. Nó phải chứa một hoặc nhiều yếu tố sau
- Chú ý có bao nhiêu
  các yếu tố có. Mỗi trong số này hiện có cùng một phong cách. Bạn có thể muốn phong cách nào khác trong số này?
  - Div đầu tiên là vùng chứa để chuyển đến liên kết nội dung chính
  - Div thứ hai là vùng chứa thông tin liên hệ của bạn
  - Div thứ ba là nơi chứa thông tin về khóa học và trường học của bạn
  Div thứ hai và thứ ba có chức năng tương tự nhau, nhưng div thứ nhất rất khác biệt
- Div đầu tiên là duy nhất. Nó có chức năng khác với tất cả các div khác và bạn có thể sẽ muốn nó được cách điệu khác đi. Do đó, nên có một id duy nhất. Gán id="skipnav" cho div đầu tiên. GHI CHÚ. Div này cũng xuất hiện trong các trang khác trong danh mục đầu tư của bạn, vì vậy bạn sẽ cần mở từng tệp HTML khác và thêm cùng thuộc tính id này vào đó
- Vì các div thứ hai và thứ ba tương tự nhau nên chúng có thể được gán một lớp. Sau đó, bất kỳ kiểu nào bạn áp dụng cho lớp đó sẽ áp dụng cho cả hai div này. Vì cả hai đều chứa thông tin về một thứ gì đó, hãy thêm thuộc tính class="info" vào mỗi div này
- Bây giờ hãy xem qua các đoạn bên trong phần tử. Nên có một đoạn tổng quan ở trên cùng. Thêm id="overview" vào đoạn này để nó có thể cách điệu khác với các đoạn khác
- Hiện tại, bạn có một số đoạn chứa nội dung giữ chỗ chẳng hạn như "Phần này sẽ sớm được hoàn thành. " Đối với mỗi đoạn này, hãy thêm class="temp". Điều này sẽ cho phép nội dung giữ chỗ được cách điệu khác với nội dung đã hoàn thành. Khi bạn thêm nội dung vào các phần này trong tương lai, bạn sẽ cần nhớ xóa lớp đó

Tài liệu/Tài liệu trực tuyến

Tất cả đã được làm xong?

Sau khi bạn đã thêm các phần tử id và lớp vào từng div trên trang chủ danh mục đầu tư của mình, giờ đây bạn đã có sẵn khung để thêm nhiều phong cách đa dạng hơn cho trang của mình. Hiển thị trang của bạn cho người hướng dẫn của bạn trước khi tiếp tục Bài học 2

Làm cách nào để hiển thị và ẩn nhiều div bằng JavaScript?

hàm myFunction[] {

var x = tài liệu. getElementById["myDIV"];

nếu [x. Phong cách. hiển thị === "không"] {

x. Phong cách. hiển thị = "khối";

} khác {

x. Phong cách. hiển thị = "không";

Chúng ta có thể có nhiều div với cùng một ID không?

Thuộc tính id HTML được sử dụng để chỉ định một id duy nhất cho một phần tử HTML. Bạn không thể có nhiều phần tử có cùng id trong tài liệu HTML .

Làm cách nào để ẩn div trong JS?

JavaScript – Ẩn Div . get reference to the div element, and assign value of "none" to the element. kiểu. tài sản hiển thị.

Ẩn [] trong JavaScript là gì?

Phương thức hide[] ẩn các phần tử đã chọn . Mẹo. Điều này tương tự như hiển thị thuộc tính CSS. không ai. Ghi chú. Các phần tử ẩn sẽ hoàn toàn không được hiển thị [không còn ảnh hưởng đến bố cục của trang].