Javascript 组合多个切换脚本

我目前正在开发一个javascript插件，用于打开和关闭多个部分。我有一切工作良好，但脚本neets以某种方式结合起来，所以这可以扩大到3个以上的切换

例如，如果我有20个不同的选项，我不想重写这个脚本20次

<div class="toggle1">Toggle 1</div>
<div class="toggle-close1">Close Toggle 1</div>

<div class="toggle2">Toggle 2</div>
<div class="toggle-close2">Close Toggle 2</div>

<div class="toggle3">Toggle 3</div>
<div class="toggle-close3">Close Toggle 3</div>


<div class="toggle-box1">Toggle 1 Box Information</div>
<div class="toggle-box2">Toggle 2 Box Information</div>
<div class="toggle-box3">Toggle 3 Box Information</div>

切换1
关闭开关1
切换2
关闭开关2
切换3
关闭切换开关3
切换1框信息
切换2框信息
切换3框信息

---

如果您可以重新安排代码，使其在包装器中具有可切换元素，如下所示：

<div class='toggle-wrapper'>
  <a class='toggle-button'>Toggle</a>
  <div class='toggleable'>
    content
  </div>
</div>

冒昧地为您准备了一把小提琴：

---

这是一个粗略的想法，但应该可以帮助您开始

我知道您正在尝试做什么。如果你愿意接受建议，这可以用一种简单的方法来完成

HTML

jQuery

$(function(){
   $("#first li").click(function(){
      var index = $(this).index();
      $("#second li:eq(" + index + ")").toggle();
   });
});

---

无需更改HTML（只需删除classename中的数字），您就可以得到这样一个解决方案：

$(".toggle").each(function(index) {
    $(this).click(function(){
        $(".toggle-close").hide();
        $(".toggle").show();
        $(this).hide(0);
        $(".toggle-close").eq(index).show(0);
        $(".toggle-box").slideUp(800);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});
$(".toggle-close").each(function(index) {
    $(this).click(function(){
        $(this).hide(0);
        $(".toggle").eq(index).show(0);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});

---

呃。。不清楚你到底想做什么。制作一个实用函数（插件？）来处理各种隐藏/显示方法？试试这个（）：

然后初始化、绑定或更一般地调用它。我想这会让你开始的

$(function() {

  toggleMe({sSelector: '.toggle3', sMethod: 'toggle'});
  toggleMe({sSelector: '.toggle-box3', sMethod: 'slideToggle'});
  toggleMe({sSelector: '.toggle-box2', sMethod: 'slideUp'});
  toggleMe({sSelector: '.toggle1', sMethod: 'hide'});
  $('.toggle-close1').on('click', function(event) {
      toggleMe({sSelector: '.toggle1', sMethod: 'toggle'});
      console.log(event.target.innerHTML.indexOf('Close'))
      event.target.innerHTML = $('.toggle1')[0].style.display == 'block'  ? 'Close Toggle 1': 'Open Toggle 1';
  });
});

---

您可以将if/else方法替换为case开关、展开、添加默认case等。

类在文档中不必是唯一的。问题解决了吗？我认为我们对“插件”的定义不一样。我认为部分问题在于您将状态数据存储在DOM中。一种方法是在脚本中存储一个.toggle box元素数组。如果使用Javascript循环结构创建所有这些“toggle box”，则可以使用相同的结构编写

。click（）

处理程序。

$(function(){
   $("#first li").click(function(){
      var index = $(this).index();
      $("#second li:eq(" + index + ")").toggle();
   });
});

$(".toggle").each(function(index) {
    $(this).click(function(){
        $(".toggle-close").hide();
        $(".toggle").show();
        $(this).hide(0);
        $(".toggle-close").eq(index).show(0);
        $(".toggle-box").slideUp(800);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});
$(".toggle-close").each(function(index) {
    $(this).click(function(){
        $(this).hide(0);
        $(".toggle").eq(index).show(0);
        $(".toggle-box").eq(index).slideToggle(800);
    });
});

function toggleMe(options) {
  var _selector = !!options.sSelector ? options.sSelector : '.toggle'; // Pass any selector (can be #idSomething or .classSomething)
  var _method = !!options.sMethod ? options.sMethod : 'toggle'; // Pass in method let default be used ('toggle' will set it to other value of current state(show/hide))
  var _time = !!options.nTime ? options.nTime: 800; // Pass class in time to be used with certain methods
  //console.log(options);

  $(_selector).each(function(event){
    //console.log(this);
    try {
        if(_method == 'slideUp') {
            $(this).slideUp(_time);
        } else if(_method == 'slideToggle') {
            $(this).slideToggle(_time);
        } else if(_method == 'toggle') {
            this.style.display = this.style.display == 'none' ? 'block': 'none';
        } else if(_method == 'hide') {
            $(this).hide();
        }  else if(_method == 'show') {
            $(this).show();
        } else {
            console.log('here in NADA Land');
        }
    } catch(err) {
        console.log(err);
    } 
  });
}; // End Function

$(function() {

  toggleMe({sSelector: '.toggle3', sMethod: 'toggle'});
  toggleMe({sSelector: '.toggle-box3', sMethod: 'slideToggle'});
  toggleMe({sSelector: '.toggle-box2', sMethod: 'slideUp'});
  toggleMe({sSelector: '.toggle1', sMethod: 'hide'});
  $('.toggle-close1').on('click', function(event) {
      toggleMe({sSelector: '.toggle1', sMethod: 'toggle'});
      console.log(event.target.innerHTML.indexOf('Close'))
      event.target.innerHTML = $('.toggle1')[0].style.display == 'block'  ? 'Close Toggle 1': 'Open Toggle 1';
  });
});