如何精简和压缩重复的jQuery代码 [英] How to Streamline and Compress Repetitive jQuery Code

问题描述

我想单击一个链接，然后在内容列表中的2个内容块之间切换，从本质上讲是从显示内容到编辑内容.

I want to click a link and toggle between 2 blocks of content, within a list of content, to essentially go from displaying content to editing content.

我有以下代码片段:

<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表行会随着时间的增长而增长，我不想继续编辑脚本.

This works, but I want to make my jquery/javascript code more dynamic and not hard coded. My MySQL table rows will grow over time and I don't want to have to keep editing my script.

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

Is it possible to re-write the jquery code to dynamically handle the ID's rather than having to create individual and redundant on('click', function()'s?

感谢您的帮助.

[请参见如何在jQuery中进行切换，此问题是我的第一个问题]

[see How to Toggle in jQuery for my initial question to this problem]

推荐答案

我不确定我是否了解您想要的内容，但是我去了:

I'm not sure if I understanded what you want but here i go:

首先添加一个div来包装HTML标记的每个重复部分，在此示例中，我添加了一个名为 content-wrapper 的类，以简化jquery click事件:

First add a div to wrap each repetive section of the HTML markup, in this example I added a class called content-wrapper to add the jquery click event easier:

<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修改为以下代码:

Then i modified the JS to the following code:

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

The JS adds a event to each anchor (a tag) inside the divs of content-wrapper, then when it is clicked, it checks for its siblings (the tags next to it like: div.show and the input) and toggles them. I added a filter in the second siblings to get only the input of the clicked anchor and focus it.

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

I didn't test it but it should work.

这篇关于如何精简和压缩重复的jQuery代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！