缩短我的jQuery切换脚本

嗨我有一个切换脚本，在触发器#toggleshow和显示div的#show。缩短我的jQuery切换脚本

我正在使用这个的多个实例，所以我有一个脚本后缀数字在ID的末尾。所以我有＃toggleshow01，＃show01等等。

我运行此功能脚本是：

$('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});});

问题是我必须复制此脚本的每个实例，即

$('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});}); 
    $('#toggleshow00').live('click', function() {$('#show00').slideToggle('slow', function() {});}); 
    $('#toggleshow01').live('click',function() {$('#show01').slideToggle('slow', function() {});}); 
    $('#toggleshow02').live('click',function() {$('#show02').slideToggle('slow', function() {});}); 
    $('#toggleshow03').live('click',function() {$('#show03').slideToggle('slow', function() {});});

这些都是我使用生成的变量后缀

var numToggle = 0; 
var numShow = 0;   
var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" class="toggle_trigger actions">&nbsp;</a>'); 
var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>');

如果可能的话，请帮我把这个脚本降到一行。

来源

2011-10-27 Clinton Green

你可以做整个好多只需添加一个类所有那些'＃toggleshow'元素和导航到里面他们的姐妹'＃show'事件处理器。 *然后*你可以做一个班轮。但确切的解决方案取决于HTML布局。你为什么要用'live'？ – Jon

嗨，这听起来不错，我现场使用，因为没有它的切换功能不工作。我有一个相当复杂的事情，你可以看看小提琴，http：//jsfiddle.net/clintongreen/edmCZ/4/我没有发布它的耳机，因为我试图保持简单的问题。干杯 –

嗨，大家好，这里是我正在研究的小提琴，对不起，我没有发布它，但它非常令人生畏，我想保持简单的问题。干杯。 http://jsfiddle.net/clintongreen/edmCZ/4/ –

我个人讨厌做这样的事情 “toggleshowX” 映射为 “showX”。这些天我们有更好的方法来存储数据。例如，你可以有你的链接看起来是这样的：

<a class="toggle_trigger actions" data-target="#show00">&nbsp;</a>

这允许您根据在回调使用$(this).data('target')相关信息，以获得目标。

$('.toggle_trigger').live('click', function() { 
    var target = $(this).data('target'); 
    $(target).slideToggle('slow', function() {}); 
});

在一行代码：

$('.toggle_trigger').live('click', function() {$($(this).data('target')).slideToggle('slow', function() {});});

来源

2011-10-28 00:17:06

嗨，感谢这个理论听起来比使用两个ID更好，但我实现了它，得到了目标与#show对应，但切换功能不触发。这是我工作的小提琴http://jsfiddle.net/clintongreen/edmCZ/4/所有的功能都在脚本部分的底部，顶部有一个大的插件插件 –

嗨，它现在工作，对不起，我之前做了一个错字错误，但当我关闭它时，它现在打开并关闭了3次。任何想法为什么发生这种情况谢谢 –

你可以发布你最新的jsfiddle，这样我可以看到它是如何工作的？ –

给每个“toggleShow”一类“toggleShow”（例如：<div class="toggleShow">）。然后，每个“展示”一类“展示”。然后，你可以很容易做到：

$(".toggleShow").live("click", function() {$(".show", this).slideToggle("slow");});

我会诚实地说，我没有测试它，但它应该工作。

编辑：

格式化以方便您阅读：

$(".toggleShow").live(
    "click", 
    function() { 
    $(".show", this).slideToggle("slow"); 
    } 
);

来源

2011-10-27 23:15:03

这将使任何*切换工作*所有*节目。 – Jon

对不起，出于某种原因，我认为“秀”是“toggleShow”的孩子。 Woops。忽略这个。 –

这个怎么样？

$(id^='toggleshow').live('click', function() { 
    $suffix = this.attr('id').substr(10); 
    $('#show'+$suffix).slideToggle('slow'); 
});

来源

2011-10-27 23:20:06

嗨，对不起，尝试过，但它不会触发切换功能。谢谢 –

@Clinton - 对不起，我搞砸了初始选择器。现在就试试。 –

谢谢你，我必须等到星期一，所有的代码都在工作，但我会def给它一个bash。干杯:) –

我不认为你可以在一行中做到这一点。还有可能有更好的方法来做这件事比使用live()，但我清理了一下你的逻辑，使它更容易维护。我也没有你的HTML或任何想法你想要完成，所以采取一粒盐。

 (function() { 
      $(document).ready(function() { 
       var items = new Array(), 
        idprefix = "toggle"; 

       for (var i = 0; i < 4; i++) { 
        items.push("show0" + i); 
       } 
       $.each(items, function() { 
        $('#' + idprefix + this).live('click', function() { 
         $('#' + this).slideToggle('slow'); 
        }); 
       }); 
      }) 
     })()

来源

2011-10-27 23:30:51 arb

缩短我的jQuery切换脚本

回答

相关问题