jQuery: ब्राउजर विंडो रिज़ॉल्यूशन

Question

हैलो दोस्तों के आधार पर गतिशील रूप से कक्षा जोड़ें मैं ब्राउज़र विंडो रिज़ॉल्यूशन के आधार पर गतिशील रूप से शरीर को कक्षा जोड़ने की कोशिश कर रहा हूं। यहां वह कोड है जिसका मैं उपयोग करने की कोशिश कर रहा हूं लेकिन इसे ट्यून करने में मदद की ज़रूरत है क्योंकि मुझे बिल्कुल jQuery नहीं पता है।

विकल्प मैं हासिल करना चाहते हैं:

एक बार एक आगंतुक अपनी साइट के लिए आता है, इस कोड को अपने ब्राउज़र विंडो आकार की जाँच करें और निम्नलिखित नियम

1. हैं के अनुसार शरीर के लिए वर्ग को जोड़ना होगा खिड़की का आकार 1024px से अधिक है लेकिन 1280px से कम है तो कक्षा .w1280 जोड़ें।

2. विंडो का आकार से अधिक 1280px लेकिन 1440px से कम है तो वर्ग .w1440 जोड़ें।

3. विंडो का आकार से अधिक 1440px लेकिन 1280px से कम है तो वर्ग .w1680 जोड़ें।

4. यदि विंडो का आकार 1680px से अधिक है तो कक्षा .wLarge जोड़ें।

इसे प्राप्त करने के लिए, मैं निम्न स्क्रिप्ट का उपयोग करने की कोशिश कर रहा हूं। मेरे प्रश्न हैं:

1. इस सही कोड है? यदि सही कोड नहीं है तो नहीं?

2. क्या यह सबसे अच्छा सबसे कम संभव कोड है? यदि नहीं तो सही कोड क्या होगा?

कृपया मेरी मदद करें क्योंकि jQuery के बारे में मेरा ज्ञान लगभग शून्य है।

function checkWindowSize() { 
    if ($(window).width() > 1024) { 
     $('body').addClass('w1280'); 
     } else { 
     $('body').removeClass('w1280'); 
    } 
    if ($(window).width() > 1280) { 
     $('body').addClass('w1440'); 
     } else { 
     $('body').removeClass('w1440'); 
    } 
    if ($(window).width() > 1440) { 
     $('body').addClass('w1680'); 
     } else { 
     $('body').removeClass('w1680'); 
    } 
    if ($(window).width() > 1600) { 
     $('body').addClass('wLarge'); 
     } else { 
     $('body').removeClass('wLarge'); 
    } 
}  
checkWindowSize() 

Answer 1

आप body तत्व पर किसी भी अन्य वर्गों के भंडारण नहीं कर रहे हैं, तो आप ऐसा कर सकते हैं:

function checkWindowSize() { 
    var width = $(window).width(); 
    document.body.className = width > 1600 ? 'wLarge' : 
           width > 1440 ? 'w1680' : 
           width > 1280 ? 'w1440' : 
           width > 1024 ? 'w1280' : ''; 
} 

कुछ लोगों को तो एक switch बयान के साथ यह करने के लिए आपको सलाह सकता है, लेकिन, कुछ लोग भी अपने युवा को खाना पसंद करते हैं।

यह फ़ंक्शन हर बार इसे कॉल करने पर body की कक्षा को ओवरराइट करेगा (डिफ़ॉल्ट, यदि ब्राउज़र 1024 पिक्सेल से छोटा/बराबर है, तो कोई वर्ग नहीं है), इसलिए मैंने कहा कि यह काम नहीं करेगा अगर आपके body में अन्य कक्षाएं हैं जिन्हें बनाए रखने की आवश्यकता है।

संपादित प्रति Šime के सुझावों, यहाँ यह करने के लिए एक सुरक्षित तरीका है:

function checkWindowSize() { 
    var width = $(window).width(), 
    new_class = width > 1600 ? 'wLarge' : 
       width > 1440 ? 'w1680' : 
       width > 1280 ? 'w1440' : 
       width > 1024 ? 'w1280' : ''; 

    $(document.body).removeClass('wLarge w1680 w1440 w1280').addClass(new_class); 
}