1

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

我有以下代码片段：

<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()的？

感谢您的帮助。

[有关我对这个问题的最初问题，请参阅如何在 jQuery 中切换]

4

1 回答 1

1

我不确定我是否理解你想要的，但我走了：

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

<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 和输入）并切换它们。我在第二个兄弟姐妹中添加了一个过滤器，以仅获取单击的锚点的输入并将其聚焦。

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

于 2012-10-31T20:16:42.953 回答