如何优化jquery的这一部分？

我正在寻找一种方法来缩短我编写的这段代码

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

正如我现在所写的，每个元素都有自己的p id和a 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;
        });
    });

---

因此，与“MoreTokle”和“infoToggle”不同，我只需要一个运行“XToggle”的函数，其中X=单击的链接的id？

您可以这样做：

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

---

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

您可以这样做：

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

---

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

只需将所需的所有ID添加到选择器中，并在单击函数中使用此

：

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

只需将所有需要的ID添加到选择器中，并在单击功能中使用
this
：

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

使用
$（'#'+（this）.id+'Toggle'）.slideToggle（400）
使用
$（'#'+（this.id+'Toggle'）.slideToggle（400）

这将获取单击项的id并删除切换部分以提供目标id

每当我这样做的时候，我总是用一致的html来做，所以我会这样做

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

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

MyTitle
废话
$（'.header'）。单击（函数（）{
$（this.next（）.slideToggle（400）；
返回false；
});

这将获取单击项的id并删除切换部分以提供目标id

每当我这样做的时候，我总是用一致的html来做，所以我会这样做

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

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

MyTitle
废话
$（'.header'）。单击（函数（）{
$（this.next（）.slideToggle（400）；
返回false；
});
您可以将ID放入一个数组中，然后使用迭代，如下所示：

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

不过，在我看来，更好的解决方案可能是在HTML适合的情况下使用。
您可以将ID放入一个数组中，然后使用进行迭代，如下所示：

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

不过，在我看来，一个更好的解决方案可能是在HTML适合的情况下使用。
如果我正确理解您的问题，您需要一组运行.slideToggle的单击处理程序。如果这是真的，您需要以下内容（使用多个选择器绑定到一个单击处理程序）：

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

欢迎来到StackOverflow！欢迎来到StackOverflow<代码>+'）。滑动切换（400）应为
）。滑动切换（400）
+'）。滑动切换（400）应为
）。滑动切换（400）这非常有效！据我所知，this.id.replace正在从单击的操作中提取“info”或“more”？
this.id
提取所单击元素的id，即
infoToggle
或
morettoggle
，因此，我使用
replace
剥离切换部分，这样您就可以
滑动切换
或
\more
这非常有效！我知道这个.id.replace是从点击的动作中提取“信息”或“更多”？
这个.id
提取点击元素的id，即
infoToggle
或
moretobggle
，所以我使用
replace
去掉切换部分，这样你就可以
滑动切换
\info
或
\more