发表新帖
发表新帖

jQuery If DIV Doesn't Have Class “x”

后端 未结
关注
7 2303
庸人自扰
庸人自扰 2020-11-27 10:54

In jQuery I need to do an if statement to see if $this doesn\'t contain the class \'.selected\'.

$(\".thumbs\").hover(function(){

$(this).stop().fadeTo(\"no
相关标签:
7条回答
  • 感动是毒
    2020-11-27 10:58

    jQuery has the hasClass() function that returns true if any element in the wrapped set contains the specified class

    if (!$(this).hasClass("selected")) {
    //do stuff
}

    Take a look at my example of use

    • If you hover over a div, it fades as normal speed to 100% opacity if the div does not contain the 'selected' class
    • If you hover out of a div, it fades at slow speed to 30% opacity if the div does not contain the 'selected' class
    • Clicking the button adds 'selected' class to the red div. The fading effects no longer work on the red div

    Here is the code for it

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #FFF; font: 16px Helvetica, Arial; color: #000; }
</style>


<!-- jQuery code here -->
<script type="text/javascript">
$(function() {

$('#myButton').click(function(e) {
$('#div2').addClass('selected');
});

$('.thumbs').bind('click',function(e) { alert('You clicked ' + e.target.id ); } );

$('.thumbs').hover(fadeItIn, fadeItOut);


});

function fadeItIn(e) {
if (!$(e.target).hasClass('selected')) 
 { 
    $(e.target).fadeTo('normal', 1.0); 
  } 
}

function fadeItOut(e) { 
  if (!$(e.target).hasClass('selected'))
  { 
    $(e.target).fadeTo('slow', 0.3); 
 } 
}
</script>


</head>
<body>
<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both;">
Another one with a thumbs class
</div>
<input type="button" id="myButton" value="add 'selected' class to red div" />
</body>
</html>

    EDIT:

    this is just a guess, but are you trying to achieve something like this?

    • Both divs start at 30% opacity
    • Hovering over a div fades to 100% opacity, hovering out fades back to 30% opacity. Fade effects only work on elements that don't have the 'selected' class
    • Clicking a div adds/removes the 'selected' class

    jQuery Code is here-

    $(function() {

$('.thumbs').bind('click',function(e) { $(e.target).toggleClass('selected'); } );
$('.thumbs').hover(fadeItIn, fadeItOut);
$('.thumbs').css('opacity', 0.3);

});

function fadeItIn(e) {
if (!$(e.target).hasClass('selected')) 
 { 
    $(e.target).fadeTo('normal', 1.0); 
  } 
}

function fadeItOut(e) { 
  if (!$(e.target).hasClass('selected'))
  { 
    $(e.target).fadeTo('slow', 0.3); 
 } 
}

<div id="div1" class="thumbs" style=" background-color: #0f0; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;"> 
One div with a thumbs class
</div>
<div id="div2" class="thumbs" style=" background-color: #f00; margin: 10px; padding: 10px; width: 100px; height: 50px; clear: both; cursor:pointer;">
Another one with a thumbs class
</div>
    0 讨论(0)
  • 陌清茗
    2020-11-27 10:58

    When you are checking if an element has or does not have a class, make sure you didn't accidentally put a dot in the class name:

    <div class="className"></div>

$('div').hasClass('className');
$('div').hasClass('.className'); #will not work!!!!

    After a long time of staring at my code I realized I had done this. A little typo like this took me an hour to figure out what I had done wrong. Check your code!

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-27 10:59 
    $(".thumbs").hover(
    function(){
        if (!$(this).hasClass("selected")) {
            $(this).stop().fadeTo("normal", 1.0);
        }
    },
    function(){
        if (!$(this).hasClass("selected")) {
            $(this).stop().fadeTo("slow", 0.3); 
        }           
    }
);

    Putting an if inside of each part of the hover will allow you to change the select class dynamically and the hover will still work.

    $(".thumbs").click(function() {
    $(".thumbs").each(function () {
        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");
            $(this).hover();
        }
    });                 
    $(this).addClass("selected");                   
});

    As an example I've also attached a click handler to switch the selected class to the clicked item. Then I fire the hover event on the previous item to make it fade out.

    0 讨论(0)
  • 难免孤独
    2020-11-27 10:59

    How about instead of using an if inside the event, you unbind the event when the select class is applied? I'm guessing you add the class inside your code somewhere, so unbinding the event there would look like this:

    $(element).addClass( 'selected' ).unbind( 'hover' );

    The only downside is that if you ever remove the selected class from the element, you have to subscribe it to the hover event again.

    0 讨论(0)
  • 臣服心动
    2020-11-27 11:11

    Use the "not" selector.

    For example, instead of:

    $(".thumbs").hover()

    try:

    $(".thumbs:not(.selected)").hover()

    0 讨论(0)
  • 挽巷
    2020-11-27 11:19

    You can also use the addClass and removeClass methods to toggle between items such as tabs.

    e.g.

    if($(element).hasClass("selected"))
   $(element).removeClass("selected");
    0 讨论(0)
 看不清?
提交回复
热议问题