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

我对jQuery的了解非常基本，所以请耐心听我说

我有一个表格，列出了几个图像/缩略图，每个缩略图都有放大和缩小的功能。桌面上还有两个“放大”和“缩小”按钮，以防用户希望放大/缩小所有图像，而不是逐个放大/缩小

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

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

我遇到的问题是：

A.当所有缩略图都已单独放大时，禁用放大按钮；然后激活缩小按钮

B.当所有缩略图已单独缩小时，禁用缩小按钮；然后激活放大按钮

我认为这可以通过

.length（）

来实现，但我就是无法理解逻辑

我试过这个，但当然不行：

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

这里有一个

非常感谢您的帮助

编辑--

在演示中，我使用了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>

//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();
});

同样，这里有一个

---

再次感谢。

进行以下更改：

//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();
});

演示：

*注意：必须单击RuninJSFrame才能使用CODEPEN

这将起作用：

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：

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

---

Hanlet，你的解决方案非常有效，但前提是我有3个元素。表将容纳的元素数量未知，我只是碰巧在演示中使用了三个。谢谢。你只要数一数你的.zoom触发器元素，就可以得到总数。再试一次，就在Hanlet上！正是我需要的。我需要更好地思考这些概念：如果零项，那么就这样做。否则，请将此考虑在内。这就是我在做JS时的困难所在。非常感谢。@Ricardo-这不是一个非常有效的解决方案，因为每次单击按钮以获取$（'.small'）.length（更不用说.zin、.zout和.zoom触发器），您都会重新查询DOM，这对性能来说是一个很大的禁忌。尽可能避免查询DOM。我下面的“缩放”计数解决方案将是一种更有效的方法。@Jenna嗯，我明白了。是的，我以前多次听说过避免重新查询DOM，但由于我不是JS大师，我只是以牺牲性能为代价创建了类似上面所示的普通脚本，但我没有其他选择。。。直到您提供的解决方案。阅读我在你帖子上的评论。非常感谢。你有没有点击JS框架中的

run

按钮？Jenna，当我创建初始JavaScript来处理每个缩略图缩放状态时，一切都与你描述的一模一样，这意味着：如果我有一组放大和缩小的图像，我可以点击“非活动”按钮，所有图像都会“服从”这个动作，而与非活动按钮处于相同状态的图像将保持不变。如果您愿意，请再次查看我的初始演示：。非常感谢。我明白你的意思了珍娜：一旦出现放大和缩小缩略图的混合，缩放按钮应该是“非活动”的，因为按钮代表所有缩略图的单一状态。一旦缩略图与其他缩略图不同，缩放按钮需要表示激活任一状态的可能性。从来没想过会这样。除此之外，您的解决方案在DOM操作方面更加高效。。。（下面继续）…我的下一步是去询问有关优化上述代码的问题。您的解决方案也为我节省了这一步。也谢谢你的帮助。顺便说一句，这里有一个（单击JavaScript容器上的Run按钮）