Question

您好我有一个切换脚本，可以在#toggleshow上触发，而#show则在显示的div上。

我正在使用多个这样的实例，所以我有一个脚本，在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>');

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

Answer 1

我个人讨厌做“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() {});});

Answer 2

为每个“toggleShow”提供一个“toggleShow”类（例如：<div class="toggleShow">）。然后每个“显示”一类“节目”。然后你可以很容易地做到：

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

我会诚实地说我没有测试它，但它应该运行良好。

编辑：

格式化以便于阅读：

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

Answer 3

这是怎么回事？

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

Answer 4

我认为你不能一行完成。除了使用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');
                   });
               });
           })
       })()

缩短我的jQuery Toggle脚本

4 个答案: