1

私が今直面している問題は、jQuery addClass が ng-repeat で動作しないことです。

以下のコードは、私の部分的なページからのものです。ユーザーが選択したときに画像を強調表示しようとしていますが、残念ながら、ng-repeat div (最初の span3 div) の下に配置したため、選択されません。一方、2番目のspan3 divで画像を選択できます-ng-repeatなしで動的(1つの画像のみをロード)。どちらも同じ jQuery スクリプトを使用します (以下にも掲載)。

タスクを実行するための代替方法はありますか

どんな援助も大歓迎です:)どうもありがとう

部分ページ コード:

        <div class="item active">
            <!-- Three columns of text below the carousel -->
            <div class="container">
                <div class="row" >
                    <div class="span12">
                            <div class="span3" ng-repeat="path in paths.paths | limitTo:3">
                                <div>   
                                    <label >
                                        <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                        <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                        <h6>{{path.name}}</h6>
                                    </label>
                                </div>
                            </div>
                            <div class="span3">
                                <label >
                                    <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                    <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                    <h6>{{path.name}}</h6>
                                </label>
                            </div>
                    </div>
                </div>
            </div>  
        </div>
    </div> 
    <a class="left carousel-control" data-target="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" data-target="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

index.html (jQuery スクリプト)

<script type='text/javascript'>
$(window).load(function(){
$('#myCarousel input:radio').addClass('input_hidden');
$('#myCarousel input:image').click(function() {
    $('#myCarousel input:image').removeClass('selected');   
$(this).addClass('selected');

});

});

こんにちは、みんな、

@rGil のアドバイスを受け、上記のエラーが修正されました。しかし、私は今、小さなバグに直面しています。以下にコードを投稿します。

$scope.addColor=function(){
    $('#myCarousel input:radio').addClass('input_hidden');
    $('#myCarousel input:image').click(function() {
      $('#myCarousel input:image').removeClass('selected');   
      $(this).addClass('selected');

    });
  }

上記の JS コードでは、画像の 2 番目の選択以降は正常に動作します。しかし、最初のクリックでは機能しませんでした。正確に何がそれを妨げているのかわかりませんでした!皆さんの貢献に感謝します。それが私の学習の旅で前進するための私の希望と火を維持している限り。

もう一度よろしくお願いします。

4

0 に答える 0