1

我想删除我编写的不使用类 ie 的脚本UiUx3DSSVFlow。
如果不对这个内部类进行硬编码，如何利用它们的父类#thumbs？

我不应该再使用脚本中的特定类了。将来这些类可以更改为任何其他类名。在不使用内部类名的情况下，我需要以另一种方式实现相同的功能

HTML：

<!--Thumbs Image-->

<div id="thumbs">
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div class="UiUx3DSSVFlow">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>        
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
           <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
           </div>
         </div>
    </div>       
    <div id="Video" class="UiUx3DSSVFlow">
        <div class="video_gallery">     
            <div>
                <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
            </div>
        </div>
    </div>    
</div>
<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{
    border:1px solid red;
    width:100%;  
}   
#thumbs div{display:inline-block;   }    
#larger{
    border:1px solid black;
    width:100%;
}    
#larger div{display:inline-block;  }

jQuery：

function thumbs(i,incr){
    var num_thumbs=2;
    if(i===null){
        i=$("#thumbs").prop('data-index'),
        i+=num_thumbs*incr;
    }
    i=Math.max(1,Math.min(i,$('#thumbs .UiUx3DSSVFlow').length-num_thumbs+1));
    $("#thumbs").prop('data-index',i);
    $('#thumbs .UiUx3DSSVFlow').hide();
    $('#thumbs .UiUx3DSSVFlow:nth-child(n+'+i+'):nth-child(-n+'+Number(i+num_thumbs-1)+')').show();
}

$("#thumbs").prop('data-index',1);
$([['next',1],['prev',-1]]).each(function(){
    var that=this;
    $('.t'+that[0]).click(function(){
        thumbs(null,that[1]);
    });

});
$('.tprev').click();

http://jsfiddle.net/T657N/33/

4

1 回答 1

0

jsFiddle 演示

在跳入 JS 之前回顾你的 HTML、CSS 知识！

  • 您不能在一个文档中拥有多个ID ！
  • 元素（因为div 它默认是块元素）不需要width:100%;
  • display: inline-block最适合<span>元素和 xbrowser，对于其他浏览器，您需要使用某种 hax，例如：

显示：内联块；*显示：内联；缩放：1；

HTML：

<div id="thumbs">
    <div>
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
        <img src="http://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/thumbnail.png">
    </div>
    <div>     
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
        <iframe src="http://www.youtube.com/embed/iwqoOfZf4hc" allowfullscreen="" frameborder="0" height="250" width="250"></iframe>
    </div>
</div>

<p><a class="tprev" href="#">Prev</a>
<p><a class="tnext" href="#">Next</a>

CSS：

#thumbs{border:1px solid red;}
#thumbs div{display:inline;}

jQuery：

var $tDiv = $('#thumbs div');
var tDivsN = $tDiv.length;
var c = 0;

function display(){
    c= c===-1? tDivsN-1 : c%tDivsN;
    $tDiv.hide().eq(c).show();
}
display();

$('.tprev, .tnext').on('click',function(e){
    e.preventDefault();
    var myCLass= $(this).hasClass('tnext') ? c++ : c--;
    display();
});
于 2012-09-17T11:17:13.693 回答