Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

jquery - Làm cách nào tôi có thể làm cho nó hiệu quả hơn? - Nhiều công tắc jQuery

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 03:33:03 28 4
mua khóa gpt4 Nike

Tôi có một số hình ảnh được sử dụng làm công tắc chuyển đổi jQuery - hiển thị hoặc ẩn các phần tử trên các sự kiện nhấp chuột.

Mã bên dưới hầu hết hoạt động như mong đợi, nhưng tôi khá chắc chắn rằng tôi đã sử dụng rất nhiều thứ không cần thiết để đạt được nó. Bạn có đề xuất nào về việc tinh giản hóa không?

Ngoài ra, có đề xuất nào về việc tắt (chuyển sang ẩn) bất kỳ yếu tố hiển thị nào đã được chuyển sang hiển thị không? Bây giờ, nếu người dùng nhấp vào hình ảnh đầu tiên rồi nhấp vào hình ảnh thứ hai, nó sẽ xếp chồng các phần tử mới xuất hiện lên nhau. Lý tưởng nhất là tôi muốn đóng (ẩn) các phần tử trong lần chuyển đổi đầu tiên khi nhấp vào nút chuyển đổi thứ hai và/hoặc đóng bất kỳ phần tử đang mở nào trong sự kiện cuộn.

Mã bên dưới đã được rút gọn. Trên thực tế, có hơn 10 công tắc và chúng có thể hơi rắc rối nếu người dùng bật nhiều công tắc.

biên tập - Dựa trên các câu trả lời bên dưới, tôi đang sử dụng các lớp chung để nâng cao jQuery. Giải pháp này cũng đóng (ẩn) mọi phần tử đang mở (hiển thị) khác khi nhấp vào nút chuyển đổi tiếp theo, nhưng chỉ trong phần tử gốc của nút chuyển đổi đó. Vì nhiều UL được chia thành nhiều div gốc nên việc nhấp để đóng "cột2" sẽ đóng mọi phần tử hiển thị trong "cột2" nhưng không đóng bất kỳ phần tử hiển thị nào trong cột khác (ví dụ: phần mở từ cột1/phần tử hiển thị)

Mã cập nhật:

 $(".show-wine").click(function(){
// Ẩn tất cả các loại rượu ngoại trừ loại được nhấp vào
    $(this).parent().siblings().find(".wine-text").hide();
// Hiện hoặc ẩn cái được click
    $(".wine-text", $(this).parent()).toggle();
});
 $(".hide-wine").click(function(){
    $('.wine-text').hide(); // Ẩn tất cả các loại rượu
});  
.wine-văn bản {
  display:none;
  vị trí: cố định;
  hàng đầu:3em;
  trái:1,5em;
  chiều rộng: 35em;
  đệm: 1em;
  chiều cao: tự động;
  chiều cao tối thiểu: 30em;
  nền: rgba(0,0,0,0,95);
  màu:#FFF;
  bán kính đường viền: 4px;
  chiều cao dòng: 1,25em;
  căn chỉnh văn bản:trái;
}
.wine-tiles li img:hover {
  cursor:pointer;
  độ mờ:.7;
}
.wine-tiles li img .unhide:hover .wine-text {
  display:block;
}

  
  
    									
        

  •       Img 3									
          
            Rượu #1

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề1

        

    •     

  •       Img 3									
          
            Rượu #2

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề2

        

    •     

  •       Img 3									
          
            Rượu #3

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề3

        

    •   



  
    									
        

  •       Img 3									
          
            Rượu #4

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề4

        

    •   

  •       Img 3									
          
            Rượu #5

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề5

        

    •     

  •       Img 3									
          
            Rượu #6

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề6

        

    •

Mã gốc:

$("#show-wine").click(function(){  
  $(".wine-text").toggle();
});
$("#show-wine2").click(function(){  
  $(".wine-text2").toggle();
});
$("#show-wine3").click(function(){ 
  $(".wine-text3").toggle();
});
.wine-text, .wine-text2, .wine-text3, .wine-text4, .wine-text5, .wine-text6, .wine-text7, .wine-text8, .wine-text9 {
  display:none;
  vị trí: cố định;
  hàng đầu:3em;
  trái:1,5em;
  chiều rộng: 35em;
  đệm: 1em;
  chiều cao: tự động;
  chiều cao tối thiểu: 30em;
  nền: rgba(0,0,0,0,95);
  màu:#FFF;
  bán kính đường viền: 4px;
  chiều cao dòng: 1,25em;
  căn chỉnh văn bản:trái;
}
.wine-tiles li img:hover {
  cursor:pointer;
  độ mờ:.7;
}
.wine-tiles li img .unhide:hover .wine-text {
  display:block;
}

  
  
    									
        

  •       Img 1									
          
            Rượu #1

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề

        

    •     

  •       Img 2									
          
            Rượu #2

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề

        

    •     

  •       Img 3									
          
            Rượu #3

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề

        

    •   



  
    									
        

  •       Img 1									
          
          Rượu #4

          Nhà Trắng lớn


          Lorem Ipsum
          


          
            	
        
    Tiêu đề

      

    •   

  •     Img 2									
        
          Rượu #5

          Nhà Trắng lớn


          Lorem Ipsum
          


          
            	
        
    Tiêu đề

        

    •     

  •       Img 3									
          
            Rượu #6

            Nhà Trắng lớn


            Lorem Ipsum
            


            
              	
          
    Tiêu đề

        

    •

câu trả lời hay nhất

Tôi không chắc đây có phải là cách hiệu quả nhất hay không (tất nhiên có nhiều cách), nhưng đây sẽ là một trong số đó:

http://jsfiddle.net/zah9a7xp/2/

Bằng cách chọn một hình ảnh theo lớp và sử dụng hình ảnh gốc của nó, bạn có thể nhận được mã javascript như thế này:

$(".show-wine").click(function(){
    var $target = $(".wine-text", $(this).parent());
    // Ẩn tất cả các loại rượu ngoại trừ loại được nhấp vào
    $('.wine-text').not($target).hide();
    // Hiện hoặc ẩn cái được click
    $target.toggle();
});
$(".hide-wine").click(function(){
    $('.wine-text').hide(); // Ẩn tất cả các loại rượu
});

Về jquery - làm cách nào tôi có thể làm cho nó hiệu quả hơn? - Nhiều công tắc jQuery, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/26023002/

28 4 0
Bài viết khuyến nghị: html - Mã CSS không hoạt động đồng thời
Bài viết khuyến nghị: Cách làm cho read() không bị chặn và đặt lại read()
Bài viết khuyến nghị: trăn - Linux. Trăn. Đọc từ một đường ống có tên
Bài viết khuyến nghị: Cách thanh lịch để xử lý tùy chọn đọc tệp Python rU trong py2 và py3
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress