Rút ngắn jQuery

Question

Làm cách nào để làm cho jQuery này ngắn hơn? Tôi cho rằng phải có một cách làm việc tốt hơn thế này !?

(trống trong tâm trí tôi mới để jQuery) ...

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 
}); 
</script> 
<script> 
jQuery(function() { 
    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

Bất kỳ sự giúp đỡ hoặc hướng dẫn sẽ được greatt như tôi xuống đến bước cuối cùng trên trang web này và muốn nó xong :)

Answer 1

Bạn có thể sử dụng một số thuộc tính dữ liệu phụ và một lớp học thêm về liên kết của bạn để làm cho nó ngắn hơn một chút.

Vì vậy, chúng ta hãy nói html của bạn trông như thế này:

<div id="white">white</div> 
<div id="v2black">v2black</div> 
<div id="v3black">v3black</div> 

<div id="firstpagename" class="toggle" data-for="white">toggle white</div> 
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div> 
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div> 

sau đó jquery của bạn có thể viết lại như thế này:

jQuery(function() { 
    $('.toggle').on('click', function() { 
    var id = $(this).attr('data-for'); 
    $('#' + id).toggle(); 
    }); 
}); 

Answer 2

Vì vậy, có vẻ như chúng tôi đang cố gắng tạo lại hành vi "accordion" chuẩn. Tùy thuộc vào cách bố trí trang của bạn, có thể hữu ích khi đóng gói các mục của bạn nếu có thể. Đây là một giải pháp khả thi để làm cho mọi thứ mở và đóng. jsFiddle

<div id="white" class="panel"> 
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v2black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div> 
<div id="v3black" class="panel">  
    <div class="tab"></div> 
    <div class="content"></div> 
</div>​ 
<script> 
jQuery(".tab").on("click", function() { 
    $(this).closest('.panel').find('.content').toggle(); 
});​ 
</script> 

tiên chúng ta ngưng tụ mã vào một thẻ script và một tuyên bố tài liệu đã sẵn sàng, kể từ khi có nó trong 3 mảnh chỉ thêm sưng lên.

Sau đó, tôi đảm bảo đã chọn $ làm thông số cho gọi lại sẵn sàng cho tài liệu. jQuery sẽ vui lòng vượt qua nó một đối số jQuery vì vậy bên trong khối mã của chúng tôi, chúng tôi có thể sử dụng an toàn $ ngay cả khi bên ngoài khối mã của chúng tôi đã được dành riêng cho các mục đích khác.

Ở đây, .tab s kiểm soát .content bằng cách đi qua tối đa .panel và quay xuống dưới. Theo cách này, hành vi tương tự có thể kiểm soát tất cả 3.

Nếu "tab" của bạn không thể được đóng gói như thế này, bạn luôn có thể liên kết chúng với nội dung chúng hiển thị/ẩn theo cách khác. Chúng tôi sẽ chỉ cần xem html của bạn.

Answer 3

<script> 
jQuery(function() { 
    var White = jQuery("#white").hide(); 
    jQuery("#firstpagename").on("click", function() { 
     White.toggle(); 

    var Black2 = jQuery("#v2black").hide(); 
    jQuery("#secondpagename").on("click", function() { 
     Black2.toggle(); 
    }); 

    var Black3 = jQuery("#v3black").hide(); 
    jQuery("#thirdpagename").on("click", function() { 
     Black3.toggle(); 
    }); 
}); 
</script> 

để bắt đầu. Nếu bạn có nhiều yếu tố hơn, bạn có thể muốn để lặp qua một buttonid <> toggleid bản đồ:

var map = { 
    "white": "firstpagename", 
    "v2black": "secondpagename", 
    ... 
}; 
for (var toggler in map) 
    makeToggle(toggler, map[toggler]); 
function makeToggle(togglerid, pageid) { 
    var page = $(document.getElementById(pageid)).hide(); 
    $(document.getElementById(togglerid)).click(function() { 
     page.toggle(); 
    }); 
}