javascript - 组合多个切换脚本

Question

我目前正在开发一个用于打开和关闭多个部分的 javascript 插件。我的一切工作正常，但脚本需要以某种方式组合，因此可以扩展到超过 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>

http://jsfiddle.net/duBbE/

Answer 1

我明白你在做什么。如果您愿意接受建议，这可以通过简单的方式完成。

HTML

<ul id="first">
  <li>Toggle 1</li>
  <li>Toggle 2</li>
  <li>Toggle 3</li>
  <li>Toggle 4</li>
</ul>

<ul id="second">
  <li>This is 1</li>
  <li>This is 2</li>
  <li>This is 3</li>
  <li>This is 4</li>
</ul>

CSS

ul{
  list-style-type: none;
}

#second li{
  display: none;
}

jQuery

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

小提琴

Answer 2

如果您可以重新排列代码以在包装器中包含可切换的元素，如下所示：

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

你可以这样做：

$(".toggle-button").click(function (ev) {
  ev.preventDefault();
  $(this).closest(".toggle-wrapper").find("> .toggleable").toggle();
});

冒昧地为你准备了一把小提琴：http: //jsfiddle.net/duBbE/1/

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

Answer 3

无需更改您的 HTML（只需删除类名中的数字），您最终可能会得到这样的解决方案：

$(".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);
    });
});

小提琴

Answer 4

嗯..不清楚你真正想要做什么。制作一个实用功能（插件？）来处理各种隐藏/显示方法？试试这个（http://jsfiddle.net/duBbE/9/）：

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';
  });
});

您可以将方法 if/else 换成 case-switch、expand、add default case 等。