使用切换优化工作jQuery

我是jQuery的新手，编写的代码很糟糕。然而，我想优化它。目前的代码是这样的

 jQ('#Thur1More_SplitDayButton').click(function(){           
            if(jQ(this).attr('value')=='Un Split'){
                jQ(this).val('Split Day'); 
                jQ('#Thur1_Split').slideUp("fast");
                jQ('.Thur1').val("");
            }else{
                jQ(this).val('Un Split'); 
                jQ('#Thur1_Split').slideDown("fast");
            }
})
jQ('#Fri1More_SplitDayButton').click(function(){
            if(jQ(this).attr('value')=='Un Split'){
                jQ(this).val('Split Day'); 
                jQ('#Fri1_Split').hide();
                jQ('.Fri1').val("");
            }else{
                jQ(this).val('Un Split'); 
                jQ('#Fri1_Split').show();
            }
})

依此类推，10个按钮控制相邻div的向上滑动和向下滑动

为了优化，我给了所有按钮一类SplitDayButton，而div都有一类时间表2。我尝试了以下代码，但没有成功

jQuery(document).ready(function($) {
         $('.SplitDayButton').toggle(
              function() {
         $(this).closest('.timesheet2').slideUp("fast");
             }, function() {
          $(this).closest('.timesheet2').slideDown("fast");
     })
   })

我正在使用“最近”查找按钮附近需要应用操作的div。html结构与此类似

<div class="main">
   <div class="wrapper">
      <div class="timesheet1">...content</div>
      <div class="timesheet2">...content</div>
      <div class="timesheet3">
      <div class="button1" id="SplitButton1">
            <input name="mybutton1" id="mybutton1" type="button" value="Split Day" class="btn SplitDayButton">
      </div>
    </div>
 <div class="wrapper">
  <div class="timesheet1">...content</div>
  <div class="timesheet2">...content</div>
  <div class="timesheet3">
    <div class="button2" id="SplitButton2">
            <input name="mybutton2" id="mybutton2" type="button" value="Split Day"   class="btn SplitDayButton">
     </div>
   </div>
 </div>

…内容
…内容
…内容
…内容

我在这里创作了一把小提琴

---

对于第一个JS示例这样的代码，请尝试使用参数将它们映射到共享函数中

$('#Thur1More_SplitDayButton').click(function(){  
  a($(this), '#Thur1_Split', '.Thur1', 'Un Split');
});

$('#Fri1More_SplitDayButton').click(function(){
  var obj = $(this);
  b(obj, '#Fri1_Split', '.Fri1', 'Un Split');
});

这两个jQuery选择器都可以使用

function a(obj, id, className, matchStr) {
  if (obj.attr('value') === matchStr) {
    obj.val('Split Day'); 
    $(id).slideUp("fast");
    $(className).val("");
  } else {
    obj.val(matchStr); 
    $(id).slideDown("fast");
  }
}

function b(obj, id, className, matchStr) {
    if (obj.attr('value') === matchStr) {
        obj.val('Split Day'); 
        $(id).hide();
        $(className).val("");
    } else {
        obj.val(matchStr); 
        $(id).show();
    }
}

现在注意到上面的相似之处，您可以将函数合并为1

function c(key, obj, id, className, matchStr) {
    if (obj.attr('value') === matchStr) {
        obj.val('Split Day');
        if (key === 'a') {
          $(id).slideUp("fast");
        } else { // b
          $(id).hide();
        }
        $(className).val("");
    } else {
        obj.val(matchStr); 
        if (key === 'a') {
          $(id).slideDown("fast");
        } else { // b
          $(id).show();
        }
    }
}

然后返回&更改函数名，并在jqueryclick侦听器中添加一个键

$('#Thur1More_SplitDayButton').click(function(){  
  c('a', $(this), '#Thur1_Split', '.Thur1', 'Un Split');
});

$('#Fri1More_SplitDayButton').click(function(){
  var obj = $(this);
  c('b', obj, '#Fri1_Split', '.Fri1', 'Un Split');
});

---

如果希望向上或向下滑动具有特定类名的元素，可以使用以下JQuery

更新：我想让您知道，您的JSFIDLE正在抛出以下错误，无论您使用什么代码，都会导致问题错误：Bootstrap的JavaScript需要jQuery版本1.9.1或更高版本，但低于版本3。在下面发布的fiddle链接中，我删除了Bootstrap JavaScript文件资源

---

我不太清楚你的小提琴想说明什么。我下面的答案将帮助你使用“10个按钮”，这样你就不必重复你的JS代码10倍。我更新了我的代码。如果单击第一个按钮，则会出现使两个元素滑动切换的错误。afaik

obj.attr（'value'）

可替换为

obj.val（）

    jQuery(document).ready(function($) {

  $('.SplitDayButton').on("click",function(){

      //get the index of the button element
      var index = $(".SplitDayButton").index(this);  

     //select the timesheet2 class element
     var elem = $(".timesheet2")[index];        

     //slide the element up or down
     $(elem).slideToggle("fast");          

    });
});