blocks|key|357837|text|你只是在第二次尝试的时候把括号弄乱了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|357838|var+$html+=+$("html");

if+($html.hasClass('m320')+%7C%7C+$html.hasClass('m768'))+{

++//+do+stuff+

}|code-block|syntax|javascript|357839|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You just had some messed up parentheses in your 2nd attempt.

<pre><code>var $html = $("html");

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

 // do stuff 

}
</code></pre>

blocks|key|573579|text|您可以使用is()而不是hasClass()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|573580|if+($('html').is('.m320,+.m768'))+{+...+}|code-block|syntax|javascript|573581|entityMap^0|5|4|C|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

You could use <code>is()</code> instead of <code>hasClass()</code>:

<pre><code>if ($('html').is('.m320, .m768')) { ... }
</code></pre>

blocks|key|573708|text|这可能是另一种解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|573709|if+($('html').attr('class').match(/m320%7Cm768/))+{++
++//+do+stuff+++
}++|code-block|syntax|javascript|573710|根据jsperf.com的说法，它也相当快。|offset|length|573711|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/hasclass-vs-is-stackoverflow/7^0|0|0|2|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

This may be another solution:

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

according to <a href="http://jsperf.com/hasclass-vs-is-stackoverflow/7">jsperf.com</a> it's quite fast, too.

blocks|key|358055|text|对于那些想知道这些不同选项的一些不同性能方面的人，我在这里创建了一个jsperf用例：jsperf|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|358056|简而言之，使用element.hasClass('class')是最快的。|style|CODE|358057|下一个最好的选择是使用elem.hasClass('classA')+%7C%7C+elem.hasClass('classB')。关于这一点，注意:顺序很重要！如果更有可能找到“classA”类，请首先列出它！或者条件语句只要满足其中之一就会返回。|358058|到目前为止，性能最差的是使用element.is('.class')。|358059|jsperf中还列出了CyberMonk's+function和Kolja's+solution。|358060|entityMap|0|LINK|mutability|MUTABLE|url|http://jsperf.com/hasclass-vs-is-rsteffer|1|https://stackoverflow.com/a/14887517/2953985|2|https://stackoverflow.com/a/16858898/2953985^0|17|6|0|0|7|P|0|B|1E|0|E|K|0|B|K|1|W|G|2|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@$A|14|B|15|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|16|8|@$A|17|B|18|F|G]]|9|@]|C|$]]|$1|J|3|K|5|6|7|19|8|@$A|1A|B|1B|F|G]]|9|@]|C|$]]|$1|L|3|M|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]|$A|1G|B|1H|1|1I]]|C|$]]|$1|N|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]|V|$5|Q|R|S|C|$T|W]]|X|$5|Q|R|S|C|$T|Y]]]]

For anyone wondering about some of the different performance aspects with all of these different options, I've created a jsperf case here: <a href="http://jsperf.com/hasclass-vs-is-rsteffer" rel="nofollow noreferrer">jsperf</a>

In short, using <code>element.hasClass('class')</code> is the fastest.

Next best bet is using <code>elem.hasClass('classA') || elem.hasClass('classB')</code>. A note on this one: order matters! If the class 'classA' is more likely to be found, list it first! OR condition statements return as soon as one of them is met.

The worst performance by far was using <code>element.is('.class')</code>.

Also listed in the jsperf is <a href="https://stackoverflow.com/a/14887517/2953985">CyberMonk's function</a>, and <a href="https://stackoverflow.com/a/16858898/2953985">Kolja's solution</a>.

blocks|key|357922|text|以下是jfriend00提供的答案的一个细微变化：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|357923|$.fn.hasAnyClass+=+function()+{
++++var+classes+=+arguments[0].split("+");
++++for+(var+i+=+0;+i+<+classes.length;+i%2B%2B)+{
++++++++if+(this.hasClass(classes[i]))+{
++++++++++++return+true;
++++++++}
++++}
++++return+false;
}|code-block|syntax|javascript|357924|允许使用与.addClass()和.removeClass()相同的语法。例如，.hasAnyClass('m320+m768')当然需要防弹，因为它至少假设了一个参数。|offset|length|style|CODE|357925|entityMap^0|0|0|14|P|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is a slight variation on answer offered by jfriend00:

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

Allows use of same syntax as .addClass() and .removeClass(). e.g., <code>.hasAnyClass('m320 m768')</code> 
Needs bulletproofing, of course, as it assumes at least one argument.

blocks|key|573601|text|var+classes+=+$('html')[0].className;

if+(classes.indexOf('m320')+!=+-1+%7C%7C+classes.indexOf('m768')+!=+-1)+{
++++//do+something
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|573602|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var classes = $('html')[0].className;

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

blocks|key|573824|text|hasClass方法将接受一个类名数组作为参数，您可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|573825|$(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();
});|code-block|syntax|javascript|573826|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

The hasClass method will accept an array of class names as an argument, you can do something like this:

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

blocks|key|358145|text|这是为了防止您需要两个类都存在。对于或逻辑，只需使用%7C%7C|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358146|$('el').hasClass('first-class')+%7C%7C+$('el').hasClass('second-class')|code-block|syntax|javascript|358147|请随意根据需要进行优化|358148|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is in case you need both classes present. For either or logic just use ||
<pre><code>$('el').hasClass('first-class') || $('el').hasClass('second-class')
</code></pre>
Feel free to optimize as needed

blocks|key|358105|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|358106|if+($('html').hasClass('class1+class2'))+{

//+do+stuff+

}|code-block|syntax|javascript|358107|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this:

<pre><code>if ($('html').hasClass('class1 class2')) {

// do stuff 

}
</code></pre>

I have a simple if statement as such:

<pre><code>if ($('html').hasClass('m320')) {

// do stuff 

}
</code></pre>

This works as expected. However, I want to add more classes to the <code>if statement</code> to check if any of the classes are present in the <code>&lt;html&gt;</code> tag. I need it so it's not all of them but just the presence of at least one class but it can be more. 

My use case is that I have classes (e.g. <code>m320</code>, <code>m768</code>) added for various viewport widths so I only want to execute certain Jquery if it's a specific width (class).

Here is what i have tried so far:

1.

<pre><code>if ($('html').hasClass('m320', 'm768')) {

// do stuff 

}
</code></pre>

2.

<pre><code>if ($('html').hasClass('m320')) || ($('html').hasClass('m768')) {

 // do stuff 

}
</code></pre>

3.

<pre><code> if ($('html').hasClass(['m320', 'm768'])) {

 // do stuff 

 }
</code></pre>

None of these seem to work though. Not sure what I am doing wrong but most likely my syntax or structure.

JQuery .hasClass for multiple values in an if statement

我有一个简单的if语句：if ($('html').hasClass('m320')) {// do stuff }这与预期的一样。但是，我想向if statement中添加更多类，以检查<html>标记中是否存在任何类。我需要它，所以它不是所有的类，而是至少一个类的存在，但它可以更多。我的用例是，我为不同的视窗宽度添加了类(例如m320、m768)，所以我只想在特定宽度(类)的情况下执行特定的J

问if语句中多个值的JQuery .hasClass
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问if语句中多个值的JQuery .hasClassEN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问if语句中多个值的JQuery .hasClass
EN