Javascript jQuery：如何对子元素应用效果

我希望优化我的代码，而不是重新编写相同的函数：

<div class="header">
    <h3>How to use the widget</h3>
    <span  id="idwidget" ></span>
</div>

<div class="content" id="widget">

如何使用小部件

JS：

<script type="text/javascript">
    $(document).ready(function() {
        var showText="Show";
        var hideText="Hide";
        $("#idwidget").before(
            "<a href='#' class='button' id='toggle_link'>"+showText+"</a>"
        );
        $('#widget').hide();
        $('a#toggle_link').click(function() {
            if ($('a#toggle_link').text()==showText) {
                $('a#toggle_link').text(hideText);
            } else {
                $('a#toggle_link').text(showText);
            }
            $('#widget').toggle('slow');
            return false;
        });
    });
</script>

$（文档）.ready（函数（）{
var showText=“Show”；
var hideText=“隐藏”；
$（“#idwidget”）。之前(
""
);
$（“#小部件”）.hide（）；
$（'a#toggle_link'）。单击（函数（）{
if（$（'a#toggle_link'）。text（）==showText）{
$（'a#toggle_link'）。文本（hideText）；
}否则{
$（'a#toggle_link'）。文本（showText）；
}
$（'#widget'）。切换（'slow'）；
返回false；
});
});

这只适用于名为widget的div和名为idwidget的按钮

但在这一页上，我还有：

<div class="header">
    <h3>How to eat APPLES</h3>
    <span id="IDsomethingelse" ></span>
</div>

<div class="content" id="somethingelse">

如何吃苹果

我希望它与代码兼容

我听说了儿童属性，你知道怎么做吗

---

谢谢

基于您的HTML示例片段，以下内容应该可以使用（它获取所有

.content

div

s并向后查找关联的

span

）：

$（文档）.ready（函数（）{
var showText=“Show”；
var hideText=“隐藏”；
$（“.content”）.each（函数（）{
var$content=$（this.hide（）；
$("")
.insertBefore（$（“#id”+$content.attr（“id”））
。单击（函数（）{
if（$（this）.text（）==showText）{
$（this）.text（hideText）；
}否则{
$（this）.text（showText）；
}
$content.toggle（'slow'）；
返回false；
});
});
});

Edit：我已经压缩了一点代码（但是现在需要jquery1.4作为

.text（函数）

位）

---

编辑2：好的，仍然比原来的更紧凑，但返回到1.3.X安全代码。

通过执行“$content=$（this）.hide（）；”可以实现什么？.hide（）方法是否也返回某些内容？@gryzzly-jQuery中的大多数函数都返回您正在操作的对象，以便您可以将这些内容链接在一起。。。所以

var$content=$（this.hide（）与
var$content=$相同（这是）$content.hide（）。因此，只需使代码更紧凑一点。谢谢，它太完美了！；）15char@alconja在show/hide按钮中，当单击show时，它显示的不是“hide”，而是：function（idx，text）{return text==showText:showText；}@Tristan-您使用的jQuery是什么版本？我猜它是1.3.X（1.4中的
.text（function）
语法是新的），因为它看起来像是将文本设置为literal函数。。。我将把它切换回1.3安全代码。
<script type="text/javascript">
    $(document).ready(function() {
        var showText="Show";
        var hideText="Hide";
        $(".content").each(function() {
            var $content = $(this).hide();
            $("<a href='#' class='button' >"+showText+"</a>")
                .insertBefore($("#id" + $content.attr("id")))
                .click(function() {
                    if ($(this).text() == showText) {
                        $(this).text(hideText);
                    } else {
                        $(this).text(showText);
                    }
                    $content.toggle('slow');
                    return false;
                 });
        });
    });
</script>