0

私はこのコードを 2 時間以上試し、微調整してきましたが、まだ理解に近づいていません。

私は次のことをしようとしています、

div にクラス.item1、.item2、.item3がある場合、それぞれに css スタイルを追加しますが、スクリプトでさらに .item(number) クラスで自動的に作成される div があるため、カウントを自動的に取得するには .item(number) が必要です.

「.single-attendee-wrapper」に「.item + (i+1)」も必要ですが、これを機能させることはできません。

最新の修正 -

/* Inline validation */
.on( 'blur change', '.input-text', function() {
    $(".single-attendee-wrapper").each(function(i){
        var $this = $(this);
        var validated = true;

        if ( $(".cart > .item" + (i+1)) ) {
            if ( $this.val() == '' ) {
                $(".item" + (i+1) + " .count").css('background','#ED616A');
                $(".item" + (i+1) + " .count").css('color','#fff');
                validated = false;
            }
        }
        if ( validated ) {
                $(".item" + (i+1) + " .count").css('background','#D1D3D4');
                $(".item" + (i+1) + " .count").css('color','#808285');
        }

    });
} )

これまでの私のスニペットは次のとおりです。

.on( 'blur change', '.input-text', function() {
    var count = 0;


    $(".single-attendee-wrapper .input-text").each(function(){
        var $this = $(this);
        var validated = true;
        count++;

        if ( $(this) ) {
            if ( $this.val() == '' ) {
                $('.item'+ count + ' .count').css('background','#ED616A');
                $('.item'+ count + ' .count').css('color','#fff');
                validated = false;
            }
        }
        if ( validated ) {
                $('.item'+ count + ' .count').css('background','#D1D3D4');
                $('.item'+ count + ' .count').css('color','#808285');
        }

    });
} )

私のスクリプトをさらに進めると、これは完璧に機能します。

$(".single-attendee-wrapper").each(function(i) {
        $(this).addClass("item" + (i+1));
    });

HTML

<div class="single-attendee-wrapper item1">
<div class=" product-addon product-addon-one-attendee" style="display: block;">
<div class="count" style="">1</div>
</div>
<div class="single-attendee-wrapper item2">
<div class=" product-addon product-addon-two-attendees" style="display: block;">
<div class="count" style="">2</div>
</div>
<div class="single-attendee-wrapper item3">
<div class=" product-addon product-addon-three-attendees" style="display: block;">
<div class="count" style="">3</div>
</div>
4

1 に答える 1

1

で始まるすべてのクラスを選択したい場合item{*}は、「Attribute Starts With Selector [name^="value"]」を使用できます。

$("div[class^='item']")

デモ

購入前にお試しください

于 2013-09-06T11:59:58.893 に答える