jquery - ハードコーディングされた/反復的なjQuery構文を取得して動的にする方法

Question

jQuery コードを含む Web ページがあります。現在、DB テーブルの 7 行への更新に対応し、さらに約 3 行の増加を予測するために、jQuery 構文をハードコーディングしています。しかし、毎日アプリをチェックして、DB テーブルが 10 行を超えたかどうかを確認してから、ハードコーディングされた jQuery 構文をさらに追加する必要はありません。

私のjQueryを真に動的なものに圧縮して、ハードコーディングされた性質を取り除き、任意の数の行を処理できるようにするのを手伝ってくれる人はいますか? ありがとう。

<style type="text/css">
div.icons {
    clear:both;
    float:left;
    height:24px;
    width:30px;
}
div.content {
    height:24px;
}
div.show {
    display:block;
}
div.hide {
    display:none;
}
input.textbox {
    padding:0;
    margin:0;
    width:300px;
}
input.submitButton {
    padding:0;
    margin:0;
    vertical-align:middle;
}
img.button {
    vertical-align:middle;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('#b-001').on('click', function(){
        //$('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-001-on').toggle();
        $('#d-001-off').toggle();
        $('#d-001-off-focus').focus();
    });
    $('#b-002').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        //$('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-002-on').toggle();
        $('#d-002-off').toggle();
        $('#d-002-off-focus').focus();
    });
    $('#b-003').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        //$('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-003-on').toggle();
        $('#d-003-off').toggle();
        $('#d-003-off-focus').focus();
    });
    $('#b-004').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        //$('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-004-on').toggle();
        $('#d-004-off').toggle();
        $('#d-004-off-focus').focus();
    });
    $('#b-005').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        //$('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-005-on').toggle();
        $('#d-005-off').toggle();
        $('#d-005-off-focus').focus();
    });
    $('#b-006').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        //$('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-006-on').toggle();
        $('#d-006-off').toggle();
        $('#d-006-off-focus').focus();
    });
    $('#b-007').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        //$('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-007-on').toggle();
        $('#d-007-off').toggle();
        $('#d-007-off-focus').focus();
    });
    $('#b-008').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        //$('#d-008-off').hide('slow');$('#d-008-on').show('slow');

        $('#d-008-on').toggle();
        $('#d-008-off').toggle();
        $('#d-008-off-focus').focus();
    });

    // 2 extra for growth
    $('#b-009').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        //$('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        $('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-009-on').toggle();
        $('#d-009-off').toggle();
        $('#d-009-off-focus').focus();
    });
    $('#b-010').on('click', function(){
        $('#d-001-off').hide('slow');$('#d-001-on').show('slow');
        $('#d-002-off').hide('slow');$('#d-002-on').show('slow');
        $('#d-003-off').hide('slow');$('#d-003-on').show('slow');
        $('#d-004-off').hide('slow');$('#d-004-on').show('slow');
        $('#d-005-off').hide('slow');$('#d-005-on').show('slow');
        $('#d-006-off').hide('slow');$('#d-006-on').show('slow');
        $('#d-007-off').hide('slow');$('#d-007-on').show('slow');
        $('#d-008-off').hide('slow');$('#d-008-on').show('slow');
        $('#d-009-off').hide('slow');$('#d-009-on').show('slow');
        //$('#d-010-off').hide('slow');$('#d-010-on').show('slow');

        $('#d-010-on').toggle();
        $('#d-010-off').toggle();
        $('#d-010-off-focus').focus();
    });
})
</script>

<div class="content-wrapper">
    <div class="icons"><a id="b-001"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-001-on">Northside</div>
        <div class="hide" id="d-001-off"><input class="textbox" id="d-001-off-focus" name="d-001-off" maxlength="50" type="text" value="Northside" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('001');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-002"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-002-on">South Lawn</div>
        <div class="hide" id="d-002-off"><input class="textbox" id="d-002-off-focus" name="d-002-off" maxlength="50" type="text" value="South Lawn" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('002');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-003"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-003-on">East Wing</div>
        <div class="hide" id="d-003-off"><input class="textbox" id="d-003-off-focus" name="d-003-off" maxlength="50" type="text" value="East Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('003');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-004"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-004-on">West Wing</div>
        <div class="hide" id="d-004-off"><input class="textbox" id="d-004-off-focus" name="d-004-off" maxlength="50" type="text" value="West Wing" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('004');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-005"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-005-on">Lobby</div>
        <div class="hide" id="d-005-off"><input class="textbox" id="d-005-off-focus" name="d-005-off" maxlength="50" type="text" value="Lobby" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('005');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-006"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-006-on">Ground Floor</div>
        <div class="hide" id="d-006-off"><input class="textbox" id="d-006-off-focus" name="d-006-off" maxlength="50" type="text" value="Ground Floor" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('006');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

<div class="content-wrapper">
    <div class="icons"><a id="b-007"><img src="images/edit.png" alt="Edit button" class="button" title="Edit" /></a></div>
    <div class="content">
        <div class="show" id="d-007-on">TBD</div>
        <div class="hide" id="d-007-off"><input class="textbox" id="d-007-off-focus" name="d-007-off" maxlength="50" type="text" value="TBD" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('update');$('#location').val('007');" title="Update" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>
</div>

    <div class="icons"><a id="b-008"><img src="images/add.png" alt="Add button" class="button" title="Add" /></a></div>
    <div class="content">
        <div class="show" id="d-008-on">Add a new location</div>
        <div class="hide" id="d-008-off"><input class="textbox" id="d-008-off-focus" name="d-008-off" maxlength="50" type="text" value="" />&nbsp;<input src="images/go.png" alt="Go button" class="submitButton" onclick="$('#action').val('insert');$('#location').val('008');" title="Add" type="image" />&nbsp;<a href="/seminars/admin/index.php"><img src="images/cancel.png" alt="Cancel button" class="button" title="Cancel" /></a></div>
    </div>

score 2 · Accepted Answer

DEMO — Sorry to say this, but your code is poor.

Following is the jQuery replacement without changing any of your HTML, except for wrapping the "Add a new location" row with <div class="content-wrapper"></div>.

$('.icons a').on('click', function(){
    var $contentWrapper = $(this).closest('.content-wrapper');
    var $siblings = $contentWrapper.siblings('.content-wrapper');
    $siblings.find('.hide').hide('slow');
    $siblings.find('.show').show('slow');
    $contentWrapper.find('.show').toggle();
    $contentWrapper.find('.hide').toggle().find('.textbox').focus();
});

Don't forget to wrap the above jQuery in $(function(){ ... }); so that it only executes once the DOM is ready.

score 0 · Accepted Answer

私はコビーにしか同意できません。

私の手を試してみるのは楽しいかもしれないと考えました。しかし、私はそのようなものがどのように機能するのかわかりません。私はJSFiddleをリンクすることになっていないので、Cobyのコードを使用する必要があります。

マークアップとJSにはかなりの改善があります。

ある種のJSフリーフォールバックのコードに入力フィールドを含めていますか？それ以外の場合は、JSを使用してそれらを追加し、マークアップをあまり持たないようにすることができます。多くの可能な変更の1つ。

jquery - ハードコーディングされた/反復的なjQuery構文を取得して動的にする方法

2 に答える 2

Related

Reference