JQuery। If एक बयान में कई मानों के लिए क्लिक करें

Question 1

मेरे पास एक सरल कथन है जैसे कि:

if ($('html').hasClass('m320')) {

// do stuff 

}

यह उम्मीद के मुताबिक काम करता है। हालांकि, मैं if statementयह जांचने के लिए अधिक कक्षाओं को जोड़ना चाहता हूं कि <html>टैग में कोई भी कक्षाएं मौजूद हैं या नहीं । मुझे इसकी आवश्यकता है इसलिए यह उन सभी में से नहीं है, बल्कि कम से कम एक वर्ग की उपस्थिति है लेकिन यह अधिक हो सकता है।

मेरा उपयोग मामला यह है कि मेरे पास विभिन्न व्यूपोर्ट चौड़ाई के लिए कक्षाएं (उदाहरण के लिए) जोड़ी गई हैं m320, m768इसलिए मैं केवल एक विशिष्ट चौड़ाई (वर्ग) होने पर कुछ जॉकरी निष्पादित करना चाहता हूं।

यहाँ मैं क्या अब तक की कोशिश की है:

1 है।

if ($('html').hasClass('m320', 'm768')) {

// do stuff 

}

2।

if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {

 // do stuff 

}

३।

 if ($('html').hasClass(['m320', 'm768'])) {

 // do stuff 

    }

हालांकि इनमें से कोई भी काम नहीं करता है। मुझे यकीन नहीं है कि मैं क्या गलत कर रहा हूं, लेकिन सबसे अधिक संभावना मेरे वाक्यविन्यास या संरचना की है।

Question 2

आपने अपने 2 वें प्रयास में कुछ कोष्ठक गड़बड़ कर दिए थे।

var $html = $("html");

if ($html.hasClass('m320') || $html.hasClass('m768')) {

  // do stuff 

}

Question 3

आप is()इसके बजाय उपयोग कर सकते हैं hasClass():

if ($('html').is('.m320, .m768')) { ... }

Question 4

मज़े के लिए, मैंने एक छोटा jQuery ऐड-ऑन विधि लिखी है जो कई वर्ग नामों में से किसी एक के लिए जाँच करेगा:

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        if (this.hasClass(arguments[i])) {
            return true;
        }
    }
    return false;
}

फिर, आपके उदाहरण में, आप इसका उपयोग कर सकते हैं:

if ($('html').hasAnyClass('m320', 'm768')) {

// do stuff 

}

आप जितने चाहें उतने क्लास के नाम पास कर सकते हैं।

यहां एक वर्धित संस्करण है जो आपको एक स्थान से अलग किए गए कई वर्ग नामों को पास करने देता है:

$.fn.hasAnyClass = function() {
    for (var i = 0; i < arguments.length; i++) {
        var classes = arguments[i].split(" ");
        for (var j = 0; j < classes.length; j++) {
            if (this.hasClass(classes[j])) {
                return true;
            }
        }
    }
    return false;
}

if ($('html').hasAnyClass('m320 m768')) {
    // do stuff 
}

वर्किंग डेमो: http://jsfiddle.net/jfriend00/uvtSA/

Question 5

यह एक और समाधान हो सकता है:

if ($('html').attr('class').match(/m320|m768/)) {  
  // do stuff   
}

jsperf.com के अनुसार यह काफी तेज है।

Question 6

इन सभी विभिन्न विकल्पों में से कुछ अलग प्रदर्शन पहलुओं के बारे में सोच रहे लोगों के लिए, मैंने यहाँ एक jsperf केस बनाया है: jsperf

संक्षेप में, उपयोग element.hasClass('class')करना सबसे तेज़ है।

अगला सबसे अच्छा दांव उपयोग कर रहा है elem.hasClass('classA') || elem.hasClass('classB')। इस पर एक नोट: आदेश मायने रखता है! यदि वर्ग 'क्लास' मिलने की अधिक संभावना है, तो इसे पहले सूचीबद्ध करें! या हालत बयानों में से एक के मिलते ही वापस आ जाते हैं।

अब तक का सबसे खराब प्रदर्शन था element.is('.class')।

इसके अलावा jsperf में सूचीबद्ध है CyberMonk का फ़ंक्शन और कोलजा का समाधान ।

Question 7

यहाँ jfriend00 द्वारा प्रस्तुत उत्तर पर थोड़ा बदलाव है:

$.fn.hasAnyClass = function() {
    var classes = arguments[0].split(" ");
    for (var i = 0; i < classes.length; i++) {
        if (this.hasClass(classes[i])) {
            return true;
        }
    }
    return false;
}

.AddClass () और .removeClass () के समान सिंटैक्स के उपयोग की अनुमति देता है। उदाहरण के लिए, .hasAnyClass('m320 m768') बुलेटप्रूफिंग की आवश्यकता है, निश्चित रूप से, यह कम से कम एक तर्क मानता है।

Question 8

var classes = $('html')[0].className;

if (classes.indexOf('m320') != -1 || classes.indexOf('m768') != -1) {
    //do something
}

Question 9

HasClass विधि एक तर्क के रूप में वर्ग नामों की एक सरणी को स्वीकार करेगी, आप इस तरह से कुछ कर सकते हैं:

$(document).ready(function() {
function filterFilesList() {
    var rows = $('.file-row');
    var checked = $("#filterControls :checkbox:checked");

    if (checked.length) {
        var criteriaCollection = [];

        checked.each(function() {
            criteriaCollection.push($(this).val());
        });

        rows.each(function() {
            var row = $(this);
            var rowMatch = row.hasClass(criteriaCollection);

            if (rowMatch) {
                row.show();
            } else {
                row.hide(200);
            }
        });
    } else {
        rows.each(function() {
            $(this).show();
        });
    }
}

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();
});

Question 10

यह उस स्थिति में है जब आपको दोनों वर्गों की आवश्यकता है। या तो तर्क या सिर्फ उपयोग के लिए ||

$('el').hasClass('first-class') || $('el').hasClass('second-class')

आवश्यकतानुसार बेझिझक अनुकूलन करें

Question 11

इसे इस्तेमाल करे:

if ($('html').hasClass('class1 class2')) {

// do stuff 

}