Question

我想点击一个链接，在内容列表中的两个内容块之间切换，基本上从显示内容到编辑内容。

我有以下代码片段：

<style type="text/css">
    div.show {display:block;}
    input.hide {display:none;}
</style>

<script type="text/javascript">
    $(document).ready(function(){
        $('#d-01').on('click', function() {
            $('#d-01-on').toggle();
            $('#d-01-off').toggle();
            $('#d-01-off').focus();
        });
         $('#d-02').on('click', function() {
            $('#d-02-on').toggle();
            $('#d-02-off').toggle();
            $('#d-02-off').focus();
        });
        $('#d-99').on('click', function() {
            $('#d-99-on').toggle();
            $('#d-99-off').toggle();
            $('#d-99-off').focus();
        });
   })
</script>

<a href="#" id="d-01">edit</a>
<div class="show" id="d-01-on">Some content</div>
<input class="hide" id="d-01-off" name="d-01" value="Some content" />

<a href="#" id="d-02">edit</a>
<div class="show" id="d-02-on">Some content</div>
<input class="hide" id="d-02-off" name="d-02" value="Some content" />

<a href="#" id="d-99">edit</a>
<div class="show" id="d-99-on">Some content</div>
<input class="hide" id="d-99-off" name="d-99" value="Some content" />

这有效，但我想让我的jquery / javascript代码更动态，而不是硬编码。我的MySQL表行会随着时间的推移而增长，我不想继续编辑我的脚本。

是否可以重新编写jquery代码来动态处理ID，而不必创建单独的冗余on('click', function()？

感谢您的帮助。

[请参阅How to Toggle in jQuery了解我对此问题的初步提问]

Answer 1

我不确定我是否想要了解你想要的东西，但是我在这里：

首先添加一个div来包装HTML标记的每个重复部分，在本例中我添加了一个名为 content-wrapper 的类，以便更轻松地添加jquery click事件：

<div class="content-wrapper">
    <a href="#" id="d-01">edit</a>
    <div class="show" id="d-01-on">Some content</div>
    <input class="hide" id="d-01-off" name="d-01" value="Some content" />
</div>

<div class="content-wrapper">
    <a href="#" id="d-02">edit</a>
    <div class="show" id="d-02-on">Some content</div>
    <input class="hide" id="d-02-off" name="d-02" value="Some content" />
</div>

<div class="content-wrapper">
    <a href="#" id="d-99">edit</a>
    <div class="show" id="d-03-on">Some content</div>
    <input class="hide" id="d-03-off" name="d-03" value="Some content" />
</div>

然后我将JS修改为以下代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('.content-wrapper a').on('click', function() {
            $(this).siblings().toggle();
            $(this).siblings('input').focus();
        });
   })
</script>

JS在content-wrapper的div中为每个锚点（一个标记）添加一个事件，然后当它被点击时，它会检查它的兄弟节点（它旁边的标签如：div.show和输入）和切换他们。我在第二个兄弟姐妹中添加了一个过滤器，只获得点击锚点的输入并将其聚焦。

我没有测试它，但它应该可以工作。

如何简化和压缩重复的jQuery代码

1 个答案: