Nhiều bộ chọn hoặc nhiều chức năng - bất kỳ lợi ích hiệu quả nào?

Question

Tôi đang tự hỏi nếu nó có thể làm cho đoạn mã sau ngắn gọn hơn:

$('#americasTrigger').hover(
    function() { 
      $('#americasImg').fadeIn() 
     }, 
    function(){ 
      $('#americasImg').fadeOut() 
    } 
); 

$('#europeTrigger').hover(
    function() { 
     $('#europeImg').fadeIn(); 
    }, 
    function(){ 
     $('#europeImg').fadeOut(); 
    } 
);  

$('#middleEastTrigger').hover(
    function() { 
     $('#middleEastImg').fadeIn(); 
    }, 
    function(){ 
     $('#middleEastImg').fadeOut(); 
    } 
);  

//More etc 

Tên nước giữ nguyên cho mỗi, với 'Kích hoạt' hoặc 'Img' được thêm vào cuối. Có rất nhiều sự lặp lại ở đây cho tôi biết tôi sẽ không nói về cách tốt nhất này.

tôi có những suy nghĩ xung quanh:

• Crearting một kịch bản trường hợp, hoặc
• Bằng cách nào đó nhận được bộ chọn được sử dụng cho một sự lựa chọn, làm cho nó một chuỗi, tách tên của nó để nắm bắt cả nước trong việc sử dụng và ứng dụng với hàm fadeIn/Out lồng nhau với 'Img' ở cuối.

Điều này có thể hoặc tôi có quá ưa thích không?

Chỉnh sửa 1: Cảm ơn rất nhiều vì tất cả các câu trả lời, xin lỗi vì đã không đăng html, tôi đã đặt điều này dưới đây. Nói ngắn gọn, tôi đang sử dụng bản đồ hình ảnh trên hình ảnh bg (của trái đất) làm trình kích hoạt di chuột để làm mờ dần các hình ảnh di chuột của tôi.

<div class="mapTub"> 

    <img src="images/transparentPixel.png" class="mapCover" usemap="#worldMap" width="524px" height="273px"/> 

    <map name="worldMap" id="worldMap"> 
    <area id="americasTrigger" shape="poly" coords="1,2,3" href="#americas" /> 
    <area id="europeTrigger" shape="poly" coords="4,5,6" href="#europe" /> 
    <area id="middleEastTrigger" shape="poly" coords="7,8,9" href="#middleEast" /> 
    </map> 

<img src="images/International_americas_dark.png" class="americas" id="americasImg" /> 
<img src="images/International_europe_dark.png" class="europe" id="europeImg" /> 
<img src="images/International_middleEast_dark.png" class="middleEast" id="middleEastImg" /> 

</div> 

---

Reigel của câu trả lời có vẻ như con đường để đi đây, bệnh thử nó ra báo cáo lại, ý kiến ​​thêm hoan nghênh! :)

Answer 1

nhớ, mà không cần kiến ​​thức về html, đề nghị này ...

$('#americasTrigger, #europeTrigger, #middleEastTrigger').hover(
    function() { 
     var id = this.id; 
     $('#'+id.replace('Trigger', 'Img')).fadeIn(); 
     //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeIn(); 
    }, 
    function(){ 
     var id = this.id; 
     $('#'+id.replace('Trigger', 'Img')).fadeOut(); 
     //$('#'+id.slice('0',id.indexOf('Trigger'))+'Img').fadeOut(); 
    } 
); 

Bạn cũng có thể sử dụng .replace() theo đề nghị của Anurag trong bình luận dưới đây ...

---

id ='europeTrigger'; 
alert(id.slice('0',id.indexOf('Trigger'))); // alerts 'europe' 
// '#'+id.slice('0',id.indexOf('Trigger'))+'Img' is '#europeImg' 

demo

Answer 2

Vì có vẻ như bạn chỉ đang truy cập unique ids, lựa chọn tốt nhất của bạn là sử dụng lookup table IMO.

var lookmeup = [ [$('#americasTrigger'), $('#americasImg')], 
        [$('#europeTrigger'), $('#europeImg')], 
        [$('#middleEastTrigger'), $('#middleEastImg')] 
       ]; 

$.each(lookmeup, function(index, element){ 
    element[0].hover(function(){ 
     element[1].fadeIn(); 
    }, function(){ 
     element[1].fadeOut(); 
    }); 
}); 

KHÔ! tất cả đã được làm xong!

Một cách khác để thực hiện theo cách hiệu quả hơn là sử dụng event delegation.

Nếu tất cả các hover yếu tố của bạn có cùng TAG, phương pháp này có thể hữu ích:

$(document.body).delegate('div', 'mouseenter', function(e){ 
    $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeIn(); 
}); 

$(document.body).delegate('div', 'mouseleave', function(e){ 
    $('#' + e.target.id.replace(/Trigger/, 'Img')).fadeOut(); 
}); 

Giả sử rằng tất cả các bạn "hoverable" yếu tố là DIV s. Bạn vẫn nên cung cấp cho các yếu tố đó classname để chỉ những yếu tố cụ thể đó được nhắm mục tiêu.

Có nhiều ý nghĩa để hạn chế root element cho delegate().Ở đây tôi sử dụng document.body mà sẽ .live() làm. Điều tuyệt vời về .delegate() là, nếu các phần tử di chuột của bạn chia sẻ một nút cha, bạn có thể áp dụng delegate() trên nút đó. Theo cách đó, bạn giảm số lượng trình xử lý sự kiện bị ràng buộc

(2 thay vì 6).

Answer 3

lol, có vẻ như kích thước này có thể có cùng kích thước hoặc dài hơn mã của bạn, nhưng chắc chắn là máy sấy.

Nhờ @Andy để chỉ ra hình phạt hiệu suất với phiên bản trước bằng cách sử dụng $(..).each.

var regions = ['americas', 'europe', 'middleEast']; 

$.each(regions, function(region) { 
    var trigger = id(region, 'Trigger'); 
    var image = id(region, 'Image'); 

    $(trigger).hover(
     effect(image, 'fadeIn'), 
     effect(image, 'fadeOut'), 
    ); 
}); 

function effect(selector, method) { 
    return function() { 
     $(selector)[method](); 
    }; 
} 

function id(prefix, suffix) { 
    return '#' + prefix + suffix; 
} 

Nếu bạn có thể thay đổi HTML, tôi sẽ mã hóa tất cả kiến ​​thức vào trang và chỉ sử dụng jQuery để thiết lập sự kiện di chuột.

<div class='trigger' data-image='#americasImg'> 
    .. 
</div> 
<div class='trigger' data-image='#europeImg'> 
    .. 
</div> 

Javascript

function imageId(elem) { 
    return $(elem).attr('data-image'); 
} 

// Using the fade function from before 
$('.trigger').hover(
    effect(imageId(this), 'fadeIn'), 
    effect(imageId(this), 'fadeOut') 
); 

Answer 4

Hoặc, để làm cho mọi việc đơn giản hơn nhiều, thêm một lớp đánh dấu, gọi là 'fadingImage' ví dụ, để mỗi người trong số những hình ảnh và sau đó sử dụng mã này ...

$('.fadingImage').hover( 
    function() { 
     $(this).fadeIn() 
    }, 
    function(){ 
     $(this).fadeOut() 
    } 
); 

Điều này làm việc vì tất cả hình ảnh, không phân biệt id của chúng, được xử lý theo cùng cách, mà bạn thực sự cần làm là xác định hình ảnh nào trên trang của bạn cần có trình xử lý được đính kèm và thi s được thực hiện với lớp đánh dấu. Bạn thậm chí có thể phân phối với các id hoàn toàn, nếu chúng không được sử dụng cho bất cứ điều gì khác.

Cập nhật: Không mà tôi đã thức dậy (Cảm ơn jAndy & Reigel!), Tôi sẽ sửa đổi bài viết của tôi để đối phó với thực tế là các yếu tố được hovered không phải là một trong đó là được mờ.

Nếu không có bất kỳ đánh dấu mẫu nào, tôi sẽ phải đưa ra một số giả định, nhưng áp phích gốc có thể muốn cung cấp đánh dấu thực, để đưa mọi thứ vào ngữ cảnh.

<div> 
    <span class="fadingTrigger">first text to hover over<span> 
    <img class="fadingImage" src="..." alt="first image to be faded"/> 
<div> 
<div> 
    <span class="fadingTrigger">second text to hover over<span> 
    <img class="fadingImage" src="..." alt="second image to be faded"/> 
<div> 

$('.fadingTrigger').hover( 
    function() { 
     $(this).parent().find(".fadingImage").fadeIn() 
    }, 
    function(){ 
     $(this).parent().find(".fadingImage").fadeOut() 
    } 
); 

Tùy thuộc vào cấu trúc đánh dấu, phương pháp tìm fadingImage được liên kết với các fadingTrigger có thể phải thay đổi, nhưng do có một số cấu trúc được xác định rõ, nó phải là đáng tin cậy.

Lý do tại sao tôi thích phương pháp này hơn khi sử dụng một mảng các id để tra cứu các phần tử là bất kỳ bổ sung nào để đánh dấu sẽ yêu cầu thay đổi đối với javascript - điều này đặc biệt có vấn đề nếu đánh dấu được tạo động. Javascript cũng có thể được tạo động, bao gồm các mảng giá trị thích hợp, nhưng sẽ vi phạm hiệu trưởng DRY.