javascript - Onclick toggle selected div's class and change unselected divs' classes too - Stack Overflow

admin管理员组

文章数量:1310455

here's what I have so far. /

Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.

Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!

And for those who don't want to click on the jsfiddle link, here's the code.

<style type='text/css'>
    div.product {
    display:inline-block;  
    vertical-align:top;
    text-align:center;
    width:auto;
    margin:0 47px 0 0;
    padding:24px 22px 20px 27px;
    border:1px solid transparent;
    }

    div.product:last-child {
    margin:0px;
    }

    div.product:hover {
    border:1px solid #878787;
    -moz-border-radius:3px;
    border-radius:3px;
    }

    div.product.unselected {
    opacity:0.6;
    filter:alpha(opacity=60);
    }

    div.product.selected {
    border:1px solid #32a24e;
    -moz-border-radius:3px;
    border-radius:3px;
    }
</style>    
<script type='text/javascript' src='//code.jquery/jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        $(".product").click(function () {
            $(this).toggleClass("selected");
        });
    });//]]>
//]]>  

</script>

<div class="product">
    <div class="itemImage"><img src=".png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">1</div>
</div>

<div class="product">
    <div class="itemImage"><img src=".png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">2</div>
</div>

<div class="product">
    <div class="itemImage"><img src=".jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">3</div>
</div>

here's what I have so far. http://jsfiddle/nSfWs/

Right now when a user clicks on a product div, the green box appears by adding the class "selected" to the product div. What I'd like to also happen is for the class "unselected" to be added remaining two unselected product divs. Therefore, one div would have the green box/border and the other two would be faded with the opacity filter.

Can someone help me make this work? It seems simple enough, but it's driving me crazy. Thanks!

And for those who don't want to click on the jsfiddle link, here's the code.

<style type='text/css'>
    div.product {
    display:inline-block;  
    vertical-align:top;
    text-align:center;
    width:auto;
    margin:0 47px 0 0;
    padding:24px 22px 20px 27px;
    border:1px solid transparent;
    }

    div.product:last-child {
    margin:0px;
    }

    div.product:hover {
    border:1px solid #878787;
    -moz-border-radius:3px;
    border-radius:3px;
    }

    div.product.unselected {
    opacity:0.6;
    filter:alpha(opacity=60);
    }

    div.product.selected {
    border:1px solid #32a24e;
    -moz-border-radius:3px;
    border-radius:3px;
    }
</style>    
<script type='text/javascript' src='//code.jquery./jquery-1.10.1.js'></script>
<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
        $(".product").click(function () {
            $(this).toggleClass("selected");
        });
    });//]]>
//]]>  

</script>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia/wikipedia/mons/6/63/Wikipedia-logo.png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">1</div>
</div>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia/wikipedia/en/b/bc/Wiki.png" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">2</div>
</div>

<div class="product">
    <div class="itemImage"><img src="http://upload.wikimedia/wikipedia/en/thumb/0/0f/Plectrophenax_nivalis1.jpg/320px-Plectrophenax_nivalis1.jpg" alt="Model 11710" width="85" height="146" /></div>
    <div class="description">3</div>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Oct 8, 2013 at 5:37 christinechristine 8922 gold badges33 silver badges1212 bronze badges 1

• Like this ? jsfiddle/nSfWs/4 – Ali Bassam Commented Oct 8, 2013 at 5:42

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

Simply remove the class from the siblings:

    $(".product").click(function () {
        $(this).toggleClass('selected').siblings().removeClass("selected");
    });

just remove the class from other divs on click event,

$(window).load(function(){
    $(".product").click(function () {
        $(".product").removeClass("selected")
        $(this).toggleClass("selected");
    });
});

and you can toggle the other class as well,

$(".product").click(function () {
        $(".product").not(this).removeClass("selected").addClass('unselected')
        $(this).toggleClass("unselected").toggleClass("selected");
});

See I have edited

Try using siblings() to change the class of the remaining divs.

$(this).siblings("product").addClass("unselected");

Try this:

$(".product").click(function () {
    $(".product").removeClass("unselected");
    $(".product").removeClass("selected");
    $(this).addClass("selected").siblings().addClass("unselected");
});

Fiddle

Try this

$(window).load(function(){
    $(".product").click(function () {
        $(".product").removeClass("selected").addClass("unselected");
        $(this).removeClass("unselected").addClass("selected");
    });
});

Fiddle

本文标签： javascriptOnclick toggle selected div39s class and change unselected divs39 classes tooStack Overflow