Question

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

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

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

点击每个缩略图并放大/缩小
点击放大按钮，让所有缩略图放大
点击缩小按钮，缩小所有缩略图

我遇到的问题是：

一个。所有缩略图单独放大后，取消激活放大按钮;然后激活缩小按钮。

B中。所有缩略图单独缩小后，取消激活缩小按钮;然后激活放大按钮。

我认为这可以通过.length()完成，但我无法绕过逻辑。

我尝试了这个但当然不起作用：

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

这是 Demo in 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();
});

同样，这是一个 Demo in Codepen 。

再次感谢。

Answer 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");
   }

CodePen ：http://codepen.io/anon/pen/Efldb

Answer 2

您实际上并不只是想“切换”放大和缩小按钮的活动状态，因为您可以混合使用放大和缩小的图像，这样它们既不会全部放大也不会全部缩小。相反，您可以创建“缩放”计数并检查它是否为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));

Answer 3

进行以下更改：

//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工作！

jQuery：单击所有元素后，修改另一个元素

3 个答案: