【问题标题】:Looping Through Images using JQuery使用 JQuery 循环遍历图像
【发布时间】:2011-10-05 15:08:29
【问题描述】:

我正在尝试使用 JQuery next() 一次将 CSS 添加到一个图像中以突出显示它。当用户单击一个按钮时,它应该突出显示带有边框的 next() 图像。相反,尽管它突出显示了它之后的所有图像。

$('#imageList img').next().addClass('selected');

不过,它会将类添加到所有图像中。

【问题讨论】:

    标签: javascript jquery class slider next


    【解决方案1】:

    似乎以下内容对您来说应该很有效,应该将“选定”类添加到不包含该类的集合中的第一个图像中:

    $('#imageList img:not(.selected)').eq(0).addClass('selected');
    

    【讨论】:

      【解决方案2】:

      首先,选择第一张图片:

      var img = $('#imageList img:first').addClass('selected');
      

      现在,只要你想突出显示下一张图片,就调用这个函数:

      function selectNext() {
          img.removeClass('selected').next().addClass('selected');
      }
      

      【讨论】:

        【解决方案3】:

        这也会让你得到你想要的http://jsfiddle.net/GWtg8/2/

        $(document).ready(function(){
        $('#btn').click(function(){
            $('#cont img').not('.selected').first().addClass('selected');
        });    });
        

        【讨论】:

        • 如何在设置好之前的类之后删除它,以便一次只添加一个选定的类?
        【解决方案4】:

        试试这个

        $(function(){
            var imageList = $('#imageList img'), imgCounter = 0;
            $("buttonSelector").click(function(){
               imageList.eq(imgCounter++).addClass('selected');
            }); 
        });
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2015-05-09
          • 1970-01-01
          • 2018-06-05
          • 2011-01-05
          • 1970-01-01
          • 2013-07-16
          相关资源
          最近更新 更多