组合多个切换脚本

Combining multiple toggle scripts

本文关键字：脚本 组合      更新时间：2023-09-26

我目前正在开发一个用于打开和关闭多个部分的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/

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

<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/

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

我知道你在努力做什么。如果你对建议持开放态度，这可以用一种简单的方式来完成。

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

FIDDLE

如果不更改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);
    });
});

Fiddle

Eh。。不清楚你到底想做什么。制作一个实用函数（plugin？）来处理各种隐藏/显示方法？试试这个(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-out方法交换为案例切换、扩展、添加默认案例等。

相关文章：