Question

而不是重写相同的函数，我想优化我的代码：

<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>

这只是使用名为widget的div和名为idwidget的按钮。

但是在这个页面上我还有：

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

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

我希望它与代码兼容。

我听说过孩子的属性，你知道怎么做吗？

谢谢

Answer 1

根据您的HTML示例代码段，以下内容应该有效（它会抓取所有.content div并向后工作以查找关联的span）：

<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>

编辑：我已经对代码进行了一些压缩（但现在需要.text(function)位的jQuery 1.4。

编辑2 ：确定比原版更紧凑，但又回到1.3.X安全代码。

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

1 个答案: