Question

我正在寻找一种方法来缩短我放在一起的代码。

我有几个基本的UI元素，点击后，向下滑动以显示更多信息。

正如我现在所写的那样，每个元素都有自己的p id和id。

有没有办法将单击的id传递给正在运行的函数，所以我不需要手动代码10+元素？

        $(document).ready(function() {
        //hides info paragraph as soon as the DOM is ready (before the page loads)
        $('div.info > p').hide();

        // Toggles the slickbox on click
        $('#infoToggle').click(function() {
            $('#info').slideToggle(400);
            return false;
        });
        $('#moreToggle').click(function() {
            $('#more').slideToggle(400);
            return false;
        });
    });

所以不是“moreToggle”和“infoToggle”，而是只有一个运行“XToggle”的匿名函数，其中X =点击链接的ID？

Answer 1

只需将所需的所有ID添加到选择器，然后在点击功能中使用this：

$('#infoToggle, #moreToggle').click(function() {
  $('#' + this.id.replace('Toggle','')).slideToggle(400);
  return false;
});

Answer 2

你可以这样做：

$.each(['info', 'more', 'x'], function(i, value) {
    $('#' + value + 'Toggle').click(function() {
        $('#' + value).slideToggle(400);
        return false;
    });
});

然而，最好，最灵活的解决方案是以一种可以利用DOM关系来查找相关元素的方式构建标记。

Answer 3

如果我正确理解你的问题，你需要一堆运行.slideToggle的点击处理程序。如果这是真的，你需要类似下面的内容（使用多个选择器绑定到单击处理程序）：

$('#infoToggle, #moreToggle').click(function() {
    $('#' + $(this).attr('id').replace('Toggle','')).slideToggle(400);
    return false;
});

Answer 4

使用$('#'+(this).id+'Toggle').slideToggle(400)

Answer 5

$('.someClass').click(function() {
        $('#' + $(this).attr('id').replace('Toggle','')).slideToggle(400);
        return false;
    });

这将获取所点击项目的ID并删除他切换部分以提供目标ID。

每当我做完这个，我总是用一致的html完成它，所以我会做类似的事情

<div class='header'>MyTitle</div>
<div class='content'>blah</div>

$('.header').click(function() {
            $(this).next().slideToggle(400);
            return false;
        });

Answer 6

您可以将ID放在数组中，然后使用each进行迭代，如下所示：

$.each(['info', 'more'], function (idx, val) {
    $('#' + val + 'Toggle').click(function () {
        $('#' + val).slideToggle(400);
        return false;
    });
});

一个更好的解决方案，但在我看来，如果您的HTML适合，可能会使用children。

我如何优化这一点jquery？

6 个答案: