jQuery类函数无法正确更新？

时间：2017-03-06 03:49:54

标签： jquery css function 

jQuery.fn.areAll = function(arg) {
  return this.get().every(function(e) {
    return $(e).is(arg);
  });
};

$(document).ready(function() {

  function hidden_all() {

    if ($('.hidden_1, .hidden_2, .hidden_3').areAll(':visible')) {
      $(".togglehidden_all").removeClass("show").addClass("hide");
    } else if ($('.hidden_1, .hidden_2, .hidden_3').areAll(':hidden')) {
      $(".togglehidden_all").removeClass("hide").addClass("show");
    }
  }

  $(".hidden_all").click(function() {

    if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":visible")) {
      $(".togglehidden_all").removeClass("show").addClass("hide");
    } else if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":hidden")) {
      $(".togglehidden_all").removeClass("hide").addClass("show");
    }
  });

  $(".togglehidden_all").click(function() {

    if ($(".hidden_1, .hidden_2, .hidden_3").areAll(":visible")) {
      $(".hidden_1, .hidden_2, .hidden_3").slideUp("slow");
      $(".togglehidden_1, .togglehidden_2, .togglehidden_3").removeClass("show").addClass("hide");
      $(".togglehidden_all").removeClass("hide").addClass("show");
    } else {
      $(".hidden_1, .hidden_2, .hidden_3").slideDown("slow");
      $(".togglehidden_1, .togglehidden_2, .togglehidden_3").removeClass("hide").addClass("show");
      $(".togglehidden_all").removeClass("show").addClass("hide");
    }
  });

  $(".togglehidden_1").click(function() {

    if ($(".hidden_1").is(":visible")) {
      $(".hidden_1").slideUp("slow");
      $(".togglehidden_1").removeClass("show").addClass("hide");
      hidden_all();
    } else {
      $(".hidden_1").slideDown("slow");
      $(".togglehidden_1").removeClass("hide").addClass("show");
      hidden_all();
    }
  });

  $(".togglehidden_2").click(function() {

    if ($(".hidden_2").is(":visible")) {
      $(".hidden_2").slideUp("slow");
      $(".togglehidden_2").removeClass("show").addClass("hide");
      hidden_all();
    } else {
      $(".hidden_2").slideDown("slow");
      $(".togglehidden_2").removeClass("hide").addClass("show");
      hidden_all();
    }
  });

  $(".togglehidden_3").click(function() {

    if ($(".hidden_3").is(":visible")) {
      $(".hidden_3").slideUp("slow");
      $(".togglehidden_3").removeClass("show").addClass("hide");
      hidden_all();
    } else {
      $(".hidden_3").slideDown("slow");
      $(".togglehidden_3").removeClass("hide").addClass("show");
      hidden_all();
    }
  });

});
.show {
  color: white;
  background-color: green;
}

.hide {
  color: white;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td class="togglehidden_all">+/-</td>
    </tr>
    <tr>
      <td class="togglehidden_1">1</td>
    </tr>
    <tr>
      <td class="hidden_1">2</td>
    </tr>
    <tr>
      <td class="togglehidden_2">3</td>
    </tr>
    <tr>
      <td class="hidden_2">4</td>
    </tr>
    <tr>
      <td class="togglehidden_3">5</td>
    </tr>
    <tr>
      <td class="hidden_3">6</td>
    </tr>
    <tr>
      <td class="hidden_all">hidden_all click function Test</td>
    </tr>
  </tbody>
</table>

注意：首先单击“+/-”为该示例提供初始类。

点击“+/-”显示/隐藏div 2,4和6 单击div1切换显示/隐藏div2 单击div3切换显示/隐藏div4 单击div3切换显示/隐藏div4

当div1，div2和div3全部逐个打开时，“+/-”更新为hide类（红色）。但是，当它们全部逐个关闭时，它不会更新到show class（绿色）。即它反向奇怪地反向工作

（如果我通过$（“。hidden_​​all”）手动运行该功能，它会正确更新。点击（function（）即点击“hidden_​​all click function Test”。这样我试着从其他功能中触发这个功能但它对这个问题没有影响。）

提前致谢。

3 个答案:

答案 0 :(得分：0)

左边这个答案是IN的原始标记。

我发现你的代码有点忙，原谅我，所以我稍微改了一下。我还将动画放在一个函数中，以便更容易调用。 

$(document).ready(function() {
  var allthem = $('.hidden_1, .hidden_2, .hidden_3');

  function hidden_all() {
    $(".togglehidden_all")
      .toggleClass("show", allthem.areAll(':visible'))
      .toggleClass("hide", allthem.areAll(':hidden'));
  }
  jQuery.fn.areAll = function(arg) {
    return this.get().every(function(e) {
      return $(e).is(arg);
    });
  };
  jQuery.fn.slideToggleBool = function(bool, options) {
    return bool ? $(this).slideDown(options, hidden_all) : $(this).slideUp(options, hidden_all);
  };
  $(".hidden_all").click(function() {
    hidden_all();
  });
  $(".togglehidden_all").click(function() {
    var isall = allthem.areAll(":visible");
    allthem.slideToggleBool(!isall, "slow");
    $(".togglehidden_1, .togglehidden_2, .togglehidden_3")
      .toggleClass("show", isall)
      .toggleClass("hide", !isall);
  });
  $(".togglehidden_1, .togglehidden_2, .togglehidden_3").on('click', function() {
    // to keep ref inside the done where "this" is the animating one
    var me = $(this);
    $(this).closest('tr').next('tr').find('td').promise().done(function() {
      // will be called when all the animations on the queue finish
      var isVis = $(this).is(":visible");
      me.closest('tr').next().slideToggleBool(!isVis, "slow");
      me.toggleClass("show", !isVis).toggleClass("hide", isVis);
    });
  });
});

我还进一步重新设计了最后3个函数，以便从单击的元素中找到相对定位的元素。请注意，如果您快速单击元素（单个），它们也会出现切换问题，即未完成的动画。这也应该解决最后一个函数中的问题。

我做了最低限度的测试以检查其他问题。

答案 1 :(得分：0)

这是我的工作代码。

如果你能够简化那就太棒了。理想情况下，我希望子切换打开/关闭子切换之间的所有行。还有一些计数器可以使用任意数量的子切换来翻转主切换，如果子切换的百分比是隐藏的或可见的。

由于

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

jQuery.fn.areAll = function(arg) {
    return this.get().every(function(e) {
        return $(e).is(arg);
    });
};

$(document).ready(function(){

var $allhidden = $(".hidden_1, .hidden_2, .hidden_3");
var $subtoggles = $(".togglehidden_1, .togglehidden_2, .togglehidden_3");

function hidden_all(){

		if 			($allhidden.areAll(":visible")){
        			$(".togglehidden_all").removeClass("show").addClass("hide");}

        else {
        			$(".togglehidden_all").removeClass("hide").addClass("show");}
}

    $(".togglehidden_all").click(function(){
    
		if 		($allhidden.areAll(":visible")){
  					$allhidden.slideUp("slow");
                   	$subtoggles.removeClass("hide").addClass("show");
                    $(".togglehidden_all").removeClass("hide").addClass("show");}
		else 	{	
                    $allhidden.slideDown("slow");
        			$subtoggles.removeClass("show").addClass("hide");
                    $(".togglehidden_all").removeClass("show").addClass("hide");}
});

    $(".togglehidden_1").click(function(){
    
		if 		($(".hidden_1").is(":visible"))
        			{	$(".hidden_1").slideUp("slow", function(){
                     	$(".togglehidden_1").removeClass("hide").addClass("show");
                        hidden_all();})}
                
		else 		{	$(".hidden_1").slideDown("slow", function(){
        				$(".togglehidden_1").removeClass("show").addClass("hide");
                        hidden_all();})}                      
});

    $(".togglehidden_2").click(function(){
    
		if 		($(".hidden_2").is(":visible"))
        			{	$(".hidden_2").slideUp("slow", function(){
                     	$(".togglehidden_2").removeClass("hide").addClass("show");
                        hidden_all();})}
                
		else 		{	$(".hidden_2").slideDown("slow", function(){
        				$(".togglehidden_2").removeClass("show").addClass("hide");
                        hidden_all();})}
});

    $(".togglehidden_3").click(function(){
    
   		if 		($(".hidden_3").is(":visible"))
        			{	$(".hidden_3").slideUp("slow", function(){
                     	$(".togglehidden_3").removeClass("hide").addClass("show");
                        hidden_all();})}
                
		else 		{	$(".hidden_3").slideDown("slow", function(){
        				$(".togglehidden_3").removeClass("show").addClass("hide");
                        hidden_all();})}
});

 });

</script>

<style>
.show {
	color: white;
    background-color: green;
}
.hide {
	color: white;
    background-color: red;
}
.starthidden {
	display: none;
}
</style>

</head>
<body>

<table>
<tbody>
<tr>
<td class="togglehidden_all show">+/-</td>
</tr>
<tr>
<td class="togglehidden_1 show">1</td>
</tr>
<tr>
<td class="hidden_1 starthidden">2</td>
</tr>
<tr>
<td class="togglehidden_2 show">3</td>
</tr>
<tr>
<td class="hidden_2 starthidden">4</td>
</tr>
<tr>
<td class="togglehidden_3 show">5</td>
</tr>
<tr>
<td class="hidden_3 starthidden">6</td>
</tr>
</tbody>
</table>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我看到你修改了你的结构，可以/不反对更改标记。考虑到这一点，我设置了一些类并使用它们来简化代码。我还允许在“show”，“hide”的切换按钮上使用类的初始“状态”。

只需添加一个新的行对，就可以添加一个新的“群组”切换，没有特殊的“类”，因此无需修改代码。

在行动中看到它的小提琴：https://jsfiddle.net/MarkSchultheiss/ud99cf0u/5/

修订标记：

<table>
  <tbody>
    <tr>
      <td class="togglehidden_all">+/-</td>
    </tr>
    <tr>
      <td class="show  toggle-hide">1</td>
    </tr>
    <tr>
      <td class="hideme">2</td>
    </tr>
    <tr>
      <td class="toggle-hide">3</td>
    </tr>
    <tr>
      <td class="hideme">4</td>
    </tr>
    <tr>
      <td class="show toggle-hide">5</td>
    </tr>
    <tr>
      <td class="hideme">6</td>
    </tr>
  </tbody>
</table>

修改后的代码，注意它有一些初始的“状态”设置，允许任何标记/可见性，并让它驱动初始可见性和类状态。这是这段代码的一小部分。最后两个执行所有“活动”工作/事件处理。

$(document).ready(function() {
  // simple extenders to use
  jQuery.fn.areAll = function(arg) {
    return this.filter(arg).length === this.length;
  };
  jQuery.fn.slideToggleBool = function(bool, options) {
    return (bool ? $(this).slideDown(options) : $(this).slideUp(options));
  };
  // cache these for use
  var allthem = $('.hideme');
  var allToggles = $('.toggle-hide');
  // set initial state of toggles and associated element, respects classes present
  allToggles.each(function() {
    var isShow = $(this).hasClass("show");
    if (isShow) {
      $(this).parents('tr').next().find('td.hideme').hide();
    } else {
      $(this).toggleClass("hide", !isShow);
    }
  });
  // used to set the "all" +/- button state
  function hidden_all() {
    var areVis = allthem.areAll(':visible');
    var allHidden = allToggles.filter(":hidden").length == allToggles.length;
    $(".togglehidden_all")
      .toggleClass("show", !allHidden)
      .toggleClass("hide", areVis && !allHidden);
    return !areVis;
  }

  // set initial "+/-" button color
  hidden_all();

  // these two do all the work
  $(".togglehidden_all").on('click', function() {
    var vis = hidden_all();
    $(this).toggleClass("show", !vis).toggleClass("hide", vis);
    allthem.slideToggleBool(vis, "slow");
    allToggles
      .toggleClass("show", !vis)
      .toggleClass("hide", vis);
  });
  $(".toggle-hide").on('click', function() {
    var myTarget = $(this).parents('tr').next().find('td.hideme');
    var isVis = myTarget.is(":visible");
    myTarget.slideToggleBool(!isVis, "slow");
    $(this).toggleClass("show", isVis).toggleClass("hide", !isVis);
  });
});
相关问题
最新问题