1

我对 jQuery 的了解非常基础，所以请耐心等待。

我有一个表格列出了几个图像/缩略图，每个缩略图都有放大和缩小的功能。表格顶部还有两个“放大”和“缩小”按钮，以防用户想要放大/缩小所有图像而不是一张一张地进行。

到目前为止，我已经完成了能够：

  • 单击每个缩略图并放大/缩小
  • 单击放大按钮并放大所有缩略图
  • 单击“缩小”按钮并缩小所有缩略图

我遇到的问题是：

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 回答
1

您真的不只是想“切换”放大和缩小按钮的活动状态，因为您可以混合放大和缩小图像，因此它们既不会全部放大也不会全部缩小。相反，您可以创建一个“缩放”计数并检查它是否为 0 或等于.zoom-trigger长度以确定按钮状态。

(function($) {
  // cache as many selectors as possible to avoid 
  // re-querying the DOM every time a button is clicked
  var $zoomToggle = $('.zoom-trigger'),
      $zoomIn = $('.zin'), 
      $zoomOut = $('.zout'),
      $tn = $('.tn'),
      total = $zoomToggle.length,
      zoomed = 0;

  function zoomToggleClick() {
    var $button = $(this),
        isIn = $button.hasClass('shrink');

    $button
      .toggleClass('shrink')
      .find('img')
        .toggleClass('small');

    // increase or decrease 
    // zoomed count appropriately
    zoomed += isIn ? -1 : 1;
    updateZoomInOutButtons();
  }

  function zoomInOutClick() {
    var isIn = $(this).hasClass('zin');

    $zoomToggle.toggleClass('shrink', isIn);
    $tn.toggleClass('small', !isIn);

    // we max out the zoomed count if
    // they've clicked zoom all or reset
    // it if they've zoomed out all images
    zoomed = isIn ? total : 0;
    updateZoomInOutButtons();
  }

  function updateZoomInOutButtons() {
    $zoomIn.toggleClass('active', (zoomed === total));
    $zoomOut.toggleClass('active', (zoomed === 0));
  }

  $zoomToggle.click(zoomToggleClick);
  $zoomIn.click(zoomInOutClick);
  $zoomOut.click(zoomInOutClick);

  $('.noclick').click(function(e) {
    e.preventDefault();
  });

}(jQuery));
于 2013-04-08T18:27:54.893 回答
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

*注意：必须在 JS 框架中单击运行才能使用 CODEPEN 运行！

于 2013-04-08T17:26:27.580 回答