web-dev-qa-db-ja.com

複数のショートコードを作成し、クリックでJSの問題を修正する

任意のページ/投稿に複数の「more」セクションを作成するための以下のショートコードがあります。

function more_shortcode( $atts , $content = null ){
    return '<div id="more-outer"><a href="#" id="more-link">More</a><div id="more-inner">'. $content .'</div></div>';
}

add_shortcode( 'more', 'more_shortcode' );

#more-innerをクリックしたときに#more-outerを表示/非表示にするjQuery関数を作成しようとしていますが、問題は、同じページ内でショートコードが複数回使用されることがあるためです。クリックすると、すべての#div-inner要素が表示されます。

任意の助けやガイダンスは大歓迎です。

jqueryshortcodejavascriptfront-end
1
WpDoe

コード：-

function more_shortcode( $atts , $content = null ){
    return '<div id="more-outer-'.$atts['id'].'"><a href="#" id="more-link-'.$atts['id'].'">More</a><div id="more-inner">'. $content .'</div></div>';
}
add_shortcode( 'more', 'more_shortcode' );

使用法：-

[more id='1']This is one.[/more]

[more id='2']This is two.[/more]

[more id='3']This is three.[/more]

出力：-

<div id="more-outer-1"><a href="#" id="more-link-1">More</a><div id="more-inner">This is one.</div></div>
<div id="more-outer-2"><a href="#" id="more-link-2">More</a><div id="more-inner">This is two.</div></div>
<div id="more-outer-3"><a href="#" id="more-link-3">More</a><div id="more-inner">This is three.</div></div>

JSスクリプト： - 

<script>
    jQuery(document).ready(function($){
        $(document).on('click', '#more-outer-1', function(e){
                /* Do action for click on div with id more-outer-1 */
            });
        $(document).on('click', '#more-outer-2', function(e){
                /* Do action for click on div with id more-outer-2 */
            });
        $(document).on('click', '#more-outer-3', function(e){
                /* Do action for click on div with id more-outer-3 */
            });
    });
</script>
2
Omar Tariq