Нажатием переключите выбранный класс div и измените классы невыбранных div.

Question

Нажатием переключите выбранный класс div и измените классы невыбранных div.

0

вот что я до сих пор. http://jsfiddle.net/nSfWs/

Прямо сейчас, когда пользователь нажимает на div продукта, появляется зеленое поле, добавляя класс "selected" в div продукта. Я бы также хотел, чтобы класс "unselected" добавлялся, оставаясь двумя невыбранными разделителями продуктов. Следовательно, у одного div будет зеленый квадрат/граница, а два других будут исчезать с помощью фильтра непрозрачности.

Может кто-нибудь помочь мне сделать эту работу? Это кажется достаточно простым, но это сводит меня с ума. Благодарю!

А для тех, кто не хочет нажимать на ссылку jsfiddle, вот код.

<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.com/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.org/wikipedia/commons/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.org/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.org/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>

christine 08 окт. 2013, в 07:49

Источник

0

Нравится ? jsfiddle.net/nSfWs/4
Ali Bassam 08 окт. 2013, в 05:42

Теги:

javascript

jquery

html

css

5 ответов

Ещё вопросы

David Thomas · Answer 1 · 2013-10-08T04-28-00.000Z

Просто удалите класс из братьев и сестер:

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

Jayantha Lal Sirisena · Answer 2 · 2013-10-08T03-41-00.000Z

просто удалите класс из других div на событие click,

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

и вы можете переключить другой класс,

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

Смотрите, что я редактировал

Aashray · Answer 3 · 2013-10-08T03-55-00.000Z

Попробуйте использовать siblings() чтобы изменить класс оставшихся div s.

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

Greenhorn · Answer 4 · 2013-10-08T03-45-00.000Z

Попробуй это:

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

скрипка

otezz · Answer 5 · 2013-10-08T03-31-00.000Z

Попробуй это

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

скрипка