0

しばらく作業していたjQueryToolsScrollableがあり、ブラウザーのサイズに基づいて動的にサイズが変更される場所に到達しました。次のボタンは、スクロール可能なものの最も適切なポイントで無効になります。

スクロール可能な各アイテムは、背景の変更をトリガーします。現在、「現在の」クラスを切り替えようとしています。それらにカーソルを合わせると、白い境界線が表示されます。それも.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 に答える