创建多个封闭的快捷代码并在点击时修复JS问题

时间：2015-12-18 作者：WpDoe

我有以下短代码可以在任何页面/帖子中创建多个“更多”部分：

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\' );
我即将编写jQuery函数来显示/隐藏#more-inner 什么时候#more-outer 但问题是，短代码可以在同一个页面中多次使用，因此它基本上会生成许多具有相同ID的div，一旦单击其中任何一个，所有#div-inner 将显示元素。

非常感谢您的帮助或指导。

1 个回复
最合适的回答,由SO网友:Omar Tariq 整理而成

代码：-

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>

标签： jquery   shortcode   javascript   front-end   小码农  

相关推荐

如何通过jQuery Datepicker搜索帖子？

我正在WordPress网站上工作，我有自己的搜索筛选页面，在那里我添加了jquery日期选择器，现在我想按日期选择器搜索帖子？Html Codescript> $(function() { jQuery( \"#datepicker-13\" ).datepicker({ dateFormat : \"yy-mm-dd\" }); $(\"#datepicker-13\").datepicker().datepick