jQuery addclass在使用ng-repeat的twitter bootstrap轮播中不起作用

时间:2013-05-31 09:48:14

标签: jquery twitter-bootstrap angularjs carousel addclass

我现在面临的问题是jQuery addClass在ng-repeat下不起作用。

以下代码来自我的部分页面。我试图在用户选择它时突出显示图像,不幸的是,由于我放置在ng-repeat div(第一个span3 div)之后它没有被选中。另一方面,我可以选择具有第二个span3 div的图像 - 没有ng-repeat的动态(仅加载一个图像)。两者都使用相同的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代码,从第二次选择图像开始工作正常。但是无法在第一次点击时工作。我不确定到底是什么阻止了它!我非常感谢大家的贡献。只要它在我的学习之旅中保持着我的希望和火力。

再次感谢提前。

0 个答案:

没有答案