jQuery वर्ग द्वारा दिखाएं/छुपाएं जब कई वस्तुओं में कहा गया वर्ग

Question

मेरी मदद करने के लिए अग्रिम धन्यवाद (जिनके पास समय है और तैयार हैं)।

मैं इस स्क्रिप्ट में लिखा है:

$(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; 
    }); 
}); 

और इस पृष्ठ http://www.fraservalley-webdesign.com/portfolio/test.php पर डाल दिया।

यह उचित वर्गों के साथ प्रत्येक तत्व पर कोर्स शो/छुपाओं को छोड़कर काम करता है, न केवल मैं जिस पर हो रहा हूं। मैं विशिष्ट रूप से प्रत्येक को नाम नहीं दे सकता क्योंकि वहां दर्जनों होंगे और यह डेटाबेस संचालित सामग्री होगी।

क्या किसी को स्क्रिप्ट के भीतर उस आइटम को अलग करने का एक आसान तरीका पता है?

क्या यह समझ में आता है?

Answer 1

परिवर्तनीय "यह" माउसओवर और माउसआउट हैंडलर में ट्रिगरिंग तत्व से जुड़ा हुआ है, तो आप कुछ ऐसा कह सकते हैं

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

ट्रिगरिंग तत्व के अंदर वर्ग "foliobtn" वाले तत्वों को छिपाने के लिए।

Answer 2

क्या आप इसे आजमा सकते हैं? ,

कुछ

तरह

$(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(); 
    }); 
}); 

यहाँ आप वर्ग के आधार पर सभी तत्वों की दृश्यता नहीं बदलते हैं, लेकिन इस वर्ग का उपयोग कर एक तत्व को खोजने:

$(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

आप jQuery bind method का उपयोग करना चाहिए और वर्तमान नोड

Answer 4

आप कॉलबैक के रूप में किसी अन्य फ़ंक्शन का उपयोग कर सकते हैं, यह प्रभावी ढंग से टॉगल के रूप में कार्य करेगा, और आपका कोड सरल बना देगा।

$(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(); 
    }); 

}); 

तुम भी क्योंकि ब्राउज़र इस तत्व के लिए कोई डिफ़ॉल्ट व्यवहार है इस मामले में return false की जरूरत नहीं है:

इस एक शॉट दे।

return false एक <a> या कोई फ़ॉर्म सबमिट के लिए click की तरह कुछ के लिए अधिक उपयुक्त है, लेकिन वास्तव में आप शायद बजाय preventDefault() उपयोग करना चाहते हैं चाहते हैं।