1

リンクをクリックして、コンテンツのリスト内でコンテンツの 2 つのブロックを切り替えて、基本的にコンテンツの表示からコンテンツの編集に移行したいと考えています。

次のコードの断片があります。

<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 テーブルの行は時間の経過とともに大きくなり、スクリプトを編集し続ける必要はありません。

個別の冗長な ID を作成するのではなく、ID を動的に処理するように jquery コードを書き直すことは可能on('click', function()ですか?

助けてくれてありがとう。

[この問題に対する私の最初の質問については、jQuery でトグルする方法を参照してください]

4

1 に答える 1

1

あなたが何を望んでいるのか理解できたかどうかはわかりませんが、ここに行きます：

最初に div を追加して、HTML マークアップの各反復セクションをラップします。この例では、jquery クリック イベントを簡単に追加するためにcontent-wrapperというクラスを追加しました。

<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 と入力) をチェックし、それらを切り替えます。2 番目の兄弟にフィルターを追加して、クリックされたアンカーの入力のみを取得し、フォーカスします。

私はそれをテストしませんでしたが、動作するはずです。

于 2012-10-31T20:16:42.953 に答える