1

jQuery について私が知っていることは非常に基本的なことなので、ご容赦ください。

複数の画像/サムネイルをリストしたテーブルがあり、各サムネイルにはズームインおよびズームアウトの機能があります。また、ユーザーが画像を 1 つずつ拡大/縮小するのではなく、すべての画像を拡大/縮小したい場合に備えて、テーブルの上に「ズームイン」と「ズームアウト」の 2 つのボタンがあります。

これまでのところ、次のことができるようになりました。

  • 各サムネイルをクリックして拡大・縮小
  • ズームインボタンをクリックして、すべてのサムネイルを拡大します
  • ズームアウトボタンをクリックして、すべてのサムネイルを縮小します

私が問題を抱えているのは次のとおりです。

A.すべてのサムネイルが個別にズームインされたら、[ズームイン] ボタンを無効にします。次にズームアウトボタンを有効にします。

B.すべてのサムネイルが個別にズームアウトされたら、[ズームアウト] ボタンを無効にします。次にズームインボタンを有効にします。

これは で達成できると思いますが.length()、ロジックに頭を悩ませることはできません。

私はこれを試しましたが、もちろんうまくいきません：

$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});

ここに Codepen のデモがあります。

どんな助けでも大歓迎です。

編集 -

デモでは 3 つの要素を使用しましたが、実際にはすべてのデータがデータベースから取得されているため、テーブル内の要素の量は不明です。

これは私が使用している HTML と JavaScript です。

HTML:

<div class="toggle-zoom">
    <a href="#" class="noclick zin">Zoom In</a>
    <a href="#" class="noclick zout active">Zoom Out</a>                        
</div>  

<table data-filter="#filter-logos" class="footable">
    <thead>                         
        <tr>
            <th data-sort-ignore="true">Thumbnail</th>
            <th data-sort-ignore="true" title="Sort list">Description</th>
            <th title="Sort list">File Name</th>
            <th title="Sort list">File Type</th>
            <th data-type="numeric" title="Sort list">File Size</th>
            <th data-sort-ignore="true">Download</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="txt-center img-cell">
                <a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/200" alt="" class="tn small"></a>
            </td>
            <td>Logo  horizontal</td>
            <td>logo-h.eps</td>
            <td>EPS</td>
            <td class="txt-right">10KB</td>
            <td class="txt-center p0">
                <a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
            </td>
        </tr>
        <tr>
            <td class="txt-center img-cell">
                <a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/201" alt="" class="tn small"></a>
            </td>
            <td>Logo  horizontal</td>
            <td>logo-h.eps</td>
            <td>EPS</td>
            <td class="txt-right">10KB</td>
            <td class="txt-center p0">
                <a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
            </td>
        </tr>
        <tr>
            <td class="txt-center img-cell">
                <a href="#" class="noclick zoom-trigger link-cell" title="Zoom"><img src="http://placebear.com/g/800/202" alt="" class="tn small"></a>
            </td>
            <td>Logo  horizontal</td>
            <td>logo-h.eps</td>
            <td>EPS</td>
            <td class="txt-right">10KB</td>
            <td class="txt-center p0">
                <a href="#" class="noclick db ir link-cell download" title="Download">Download</a>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

//Zoom
$('.zoom-trigger').click(function(){
    $(this).find('img').toggleClass('small');
    $(this).toggleClass('shrink');
});

    //Zoom In
    $('.zin').click(function(){
        $('.zoom-trigger').addClass('shrink');
        $('.tn').removeClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

    //Zoom Out
    $('.zout').click(function(){
        $('.zoom-trigger').removeClass('shrink');
        $('.tn').addClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

/*Active correct zoom button when all thumnails have been clicked*/
/*
$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});
*/

//Prevents default action of links
$('.noclick').click(function(e) {
    e.preventDefault();
});

繰り返しますが、これは Codepen のデモです。

再度、感謝します。

4

3 に答える 3

1

これはうまくいきます：

if($(".small").length==0)
   {
     //all are zoomed in
     $(".zin").addClass("active");
     $(".zout").removeClass("active");
   }
   else if($(".small").length==$(".zoom-trigger").length)
   {
      $(".zin").removeClass("active");
      $(".zout").addClass("active");
   }

コードペン: http://codepen.io/anon/pen/Efldb

于 2013-04-08T17:28:45.577 に答える
0

次の変更を行います。

//Zoom
$('.zoom-trigger').click(function(){
    $(this).find('img').toggleClass('small');
    $(this).toggleClass('shrink');
});

    //Zoom In
    $('.zin').click(function(){
        $('.zoom-trigger').addClass('shrink').children('.tn').removeClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

    //Zoom Out
    $('.zout').click(function(){
        $('.zoom-trigger').removeClass('shrink').children('.tn').addClass('small');
        $(this).addClass('active').siblings().removeClass('active');
    });

//Active correct zoom button when all thumnails have been clicked
/*
$('a.zoom-trigger.shrink').length(function(){
  $('.zin').toggleClass('active');
  $('.zout').toggleClass('active');
});
*/

//Prevents default action of links
$('.noclick').click(function(e) {
    e.preventDefault();
});

デモ: http://codepen.io/anon/pen/mobKI

*注: Codepen を使用して動作させるには、JS フレームで実行をクリックする必要があります!

于 2013-04-08T17:26:27.580 に答える