0

我有一个 jQuery Tools Scrollable 我已经研究了一段时间，并且已经根据浏览器的大小动态调整它的大小，并且下一个按钮在可滚动的最右边禁用。

可滚动项中的每个项目都会触发背景更改。我现在正试图切换“当前”类。当您将鼠标悬停在它们上方时，您会看到一个白色边框。我希望它也是 .current 状态。我将如何切换它？

<div id="bkgrSelector">
<div class="scrollNav">
    <a class="prev"></a>
</div>
<div class="scrollable">   
    <div class="items" id="thumbs">
        <?php
            for($i=0; $i < count($imageArray); $i++){
                 echo('<img onclick="changeBig(\''.$imageArray[$i].'\')" src="/lib/img/bkgr/'.$imageArray[$i].'" alt="thumbnail image" width="77" height="44" />');
            }
        ?>

    </div>
</div>
<div class="scrollNav">
    <a class="next"></a>
</div>

JavaScript：

//Initiates Background selector scrollable
$("#bkgrSelector .scrollable").scrollable();

//Changes the background selector scrollable size, and handles the disabling of the next button at end of scrollable
$(window).bind('resize', function(){
    var width = $(document).width();
    var thumbWidth = Math.round(width - 350);
    $("#bkgrSelector").css("width", thumbWidth + "px" );
    $("#bkgrSelector .scrollable").css("width", (thumbWidth - 48) + "px" );

    var scrollable = jQuery("#bkgrSelector .scrollable").data("scrollable");
    var size = Math.floor(thumbWidth / 94);
    console.log(size);
    scrollable.onSeek(function(event, index) {
        if (this.getIndex() >= this.getSize() - size) {
            jQuery(".scrollNav .next").addClass("disabled");
        }
    });
    scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
    });  
 }).resize()

CSS：

#bkgrSelector .items img:hover, #bkgrSelector .items .current
{padding:0; border:2px solid #fff; cursor:pointer; }
4

1 回答 1

1

如果我正确理解了您想要的行为，当用户单击您希望 .current 样式粘贴的图像然后应用您的背景更改逻辑时？如果是这样，这样的事情会起作用：

$('#thumbs img').click(function() {

    // remove existing current selection
    $('#thumbs img.current').removeClass('current');

    // Apply style to selected item
    $(this).addClass('current');

});
于 2011-10-12T00:10:07.530 回答