0

クリックされたかどうかに応じて、ボタンのスタイルを設定しようとしています。より正確には、通常の状態とホバー状態で CSS スタイル (重要ではない) を持つボタンがあり、クリックすると特定のクラスが追加されます (私の場合selected)。

そのクラスが追加された場合は、別の CSS スタイルを適用する必要があります。さて、ボタンに必要なクラスを追加する JavaScript (より jQuery です) と CSS スタイルがあります。しかし、何も起こっていないようです。

コードの一部を貼り付けて、そのために何を使用しているかを確認できるようにしますが、実際に機能するものへのリンクを貼り付けます。

/*
  The jQuery used for adding the class
  I'm using log() to check if anything happens, but only till I make it work 
*/
var iqns = $(this).find('.iqn');

$(iqns).each(function() {

    var iqn = $(this).parent();

    $(iqn).on('click', function() {
        if($(this).hasClass('.selected')) {
            log('Rmoved / Added Class');
            $(this).removeClass('.selected');
            $(this).addClass('.selected');
        } else {
            log('Added Class');
            $(this).addClass('.selected');
        }
    });

});


<!-- A part of the HTML mockup so you can see what's the class I'm looking for -->

<div id="509247" class="product-wrapper">
    <div class="product">
        <div class="description">
            <div class="thumb">
                <i class="icon">
                    <img src="http://0.s3.envato.com/files/5880011/Pool.jpg" alt="Thumb">
                    <span class="preview" data-image-link="http://2.s3.envato.com/files/5880010/Pool.jpg">
                        <img src="assets/gfx/zoom-icon.png" alt="Zoom">
                    </span>
                </i>
            </div>
            <div class="info">
                <div class="sales">
                    <div class="icon">
                        <img src="assets/gfx/sales-icon.png" alt="Sales Icon">
                    </div>
                    <div class="text">
                        <p>2</p>
                    </div>
                </div>
                <div class="rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                   <img src="assets/gfx/empty-star.png" alt="Rating">
                </div>
            </div>
        </div>

        <div class="purchase">
            <div class="info">
                <i class="icon">
                    <i class="iqn"></i>
                    <span class="tooltip">$ 7</span>
                </i>
            </div>
            <div class="proceed">
                <a class="button" href="http://photodune.net/item/pool/509247">Purchase</a>
            </div>
        </div>
    </div>
</div>

/*
  Some of the CSS ( it is actually LESS )
*/

.icon {
    position: relative;
    margin: 0px auto;
    margin-top: 12px;
    margin-left: 12.5px;
    display: block;
    cursor: pointer;
    .dimensions(35px, 35px);
    .background(@noise-monochrome, #323b43, #242a30);
    .border(1px, 1px, 1px, 1px, #242a30);
    .border-radius(25px, 25px, 25px, 25px);
    .shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5), 1px 1px 1px rgba(255, 255, 255, 0.1) inset);
    .text-format(center, none, none, inherit, none, normal, normal, normal, #ffffff);

    .iqn {
        position: relative;
        margin: 0px auto;
        display: block;
        .dimensions(35px, 35px);
        .background(url(../gfx/price-icon.png), 0px 0px, no-repeat);
    }

    .tooltip {
        position: absolute;
        display: block;
        top: 0px;
        left: 40px;
        pointer-events: none;
        .dimensions(50px, 35px);
        .background(#1f252a);
        .border(1px, 1px, 1px, 1px, #1a1f23);
        .border-radius(5px, 5px, 5px, 5px);
        .font-format(Arial, 16px, normal, bold, normal);
        .text-format(center, none, none, inherit, none, normal, 35px, normal, #03b0f0);
        .opacity(0);
        .transition (all, 0.25s, ease-in-out);
    }

    .tooltip:before {
        position: absolute;
        top: 7.5px;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 10px solid #1f252a;
        content: '';
        z-index: 5;
    }

    .tooltip:after {
        position: absolute;
        top: 6.5px;
        left: -11px;
        width: 0;
        height: 0;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-right: 11px solid #1a1f23;
        content: '';
        z-index: 0;
    }

    &:hover {
        .background(@noise-monochrome, #3c4750, #2c353c);

        .iqn {
            .background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
        }   
    }

    &:hover > .tooltip {
        .opacity(1);
        left: 50px;
        .transition(all, 0.25s, ease-in-out);
    }

    &.selected {
        .background(@noise-monochrome, #2c353c, #3c4750);
        .shadow-normal-inset(0px 1px 2px rgba(000, 000, 000, 0.5) inset, 1px 1px 1px rgba(255, 255, 255, 0.1));

        .iqn {
            .background(url(../gfx/price-icon.png), 0px -35px, no-repeat);
        }

        .tooltip {
            .opacity(1);
            left: 50px;
            .transition(all, 0.25s, ease-in-out);
        }
    }
}

しかし、私が貼り付けたものはあまり役に立ちません。おそらくリンクがもっと役立ちます: Anchor ; ショップページに移動します。

誰かが問題を特定するのを手伝ってくれたら幸いです。私はコンソールの使用があまり得意ではありません。

4

1 に答える 1

2

.新しいクラスを追加、削除するためにドット ( ) を設定する必要はありません。コードは機能するはずです。

$(this).removeClass('selected');

于 2012-05-08T17:19:21.373 に答える