Question

我有一个jQuery Tools Scrollable我已经工作了一段时间，并且已根据浏览器大小动态调整它的位置，并且下一个按钮在可滚动的最右边点处禁用。 / p>

可滚动条目中的每个项目都会触发背景更改。我现在正试图让“当前”课程切换。当您将鼠标悬停在它们上方时，会出现白色边框。我希望它也是.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; }

Answer 1

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

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

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

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

});

将当前状态添加到jQuery Tools Scrollable的Items

1 个答案: