jQuery Hiển thị/Ẩn theo lớp khi nhiều mục chứa lớp đã nói

Question

Cảm ơn bạn đã giúp tôi (dành cho những người có thời gian và sẵn sàng).

Tôi đã viết kịch bản này:

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { 
    $('.foliobtn').show(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.foliobtn').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseover(function() { 
    $('.folionamedate').hide(); 
    return false; 
    }); 
    $('.foliobottom').mouseout(function() { 
    $('.folionamedate').show(); 
    return false; 
    }); 
}); 

và đặt nó lên trang này http://www.fraservalley-webdesign.com/portfolio/test.php.

Nó hoạt động ngoại trừ nó tất nhiên hiển thị/ẩn trên mọi phần tử với các lớp thích hợp, không chỉ là một trong những tôi đang lơ lửng trên. Tôi không thể đặt tên duy nhất cho mỗi người vì sẽ có hàng tá và nó sẽ là nội dung dựa trên cơ sở dữ liệu.

Có ai biết cách đơn giản để tách riêng mục tôi đang di chuột qua trong tập lệnh không?

Điều này có hợp lý không?

Answer 1

Biến "this" được liên kết với phần tử kích hoạt trong trình xử lý di chuột và di chuột để bạn có thể nói điều gì đó như

$('.foliobtn',this).hide(); 

để ẩn các phần tử có lớp "foliobtn" bên trong phần tử kích hoạt.

Answer 2

Bạn có thể thử điều này không?

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 

    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function() { $(this).show(); return false; }); 
    $('.foliobottom').mouseout(function() { $(this).hide(); return false; }); 

Answer 3

Bạn nên sử dụng jquery bind method:

Something như

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').mouseover(function(e) { 
    $(this).find('.foliobtn').show(); 
    $(this).find('.folionamedate').hide(); 
    }); 
    $('.foliobottom').mouseout(function(e) { 
    $(this).find('.foliobtn').hide(); 
    $(this).find('.folionamedate').show(); 
    }); 
}); 

Ở đây bạn không thay đổi tầm nhìn của tất cả các yếu tố dựa trên lớp, nhưng tìm một phần tử sử dụng lớp này, và nút hiện tại

Answer 4

Bạn có thể sử dụng một chức năng khác làm gọi lại, điều này có hiệu quả hoạt động như một nút chuyển đổi các loại và làm cho mã của bạn đơn giản hơn.

này cung cấp cho một shot:

$(document).ready(function() { 

    // hides the slickbox as soon as the DOM is ready 
    // (a little sooner than page load) 
    $('.foliobtn').hide(); 
    $('.folionamedate').show(); 

    // shows the slickbox on clicking the noted link 
    $('.foliobottom').hover(function() { 
    $(this).find('.foliobtn').show(); 
    }, function() { 
    $(this).find('.foliobtn').hide(); 
    }); 

}); 

Bạn cũng không cần phải return false trong trường hợp này vì trình duyệt không có hành vi mặc định cho các phần tử này.

return false phù hợp hơn cho một số thứ như click cho số <a> hoặc gửi biểu mẫu, nhưng thực sự bạn có thể muốn sử dụng preventDefault() thay thế.