Question

我目前在Wordpress中有一个使用Contact Form 7和手风琴的报价系统，因此用户可以在点击提交按钮之前浏览每个手风琴并勾选他们想要的内容。我想在手风琴的标题下创建他们在页面底部选择的内容的摘要，例如：素食小吃。我相信这将在javascript中完成但不是100％，任何人都可以帮忙吗？

复选框的第一个手风琴的名称=“”是“checkbox-537 []”，然后还有一些例如“checkbox-538 []”，“checkbox-539 []”

非常感谢

Answer 1

这是JS / jQuery脚本：

jQuery( function( $ ) {
    var template = {
        before_title : '<b>',    // HTML before the summary title.
        after_title  : ':</b> ', // HTML after the summary title.
        before_list  : '<p>',    // HTML before each summary.
        after_list   : '</p>',   // HTML after each summary.
        before_item  : '<i>',    // HTML before an item in the summary.
        after_item   : '</i>',   // HTML after an item in the summary.
        items_sep    : ', ',     // HTML or text separating the items.
        cont_class   : ''        // Custom CSS class for the summary.
    };

    function getSummaryHtml( title, items, klass ) {
        var t = template;

        if ( t.cont_class ) {
            klass = $.trim( t.cont_class + ' ' + klass );
        }

        return '' + // wrapped
        '<div class="' + klass + '">' +
            t.before_title + title + t.after_title +
            t.before_list + t.before_item +
            items.join( t.after_item + t.items_sep + t.before_item ) +
            t.after_item + t.after_list +
        '</div>';
    }

    function displaySummary( input, title ) {
        var $form = $( input ).closest( 'form.wpcf7-form' ),
            name = $( input ).attr( 'name' ),
            s = 'input[name="' + name + '"]:checked',
            klass = name.replace( '[]', '' ),
            items = [];

        $( input ).closest( '.wpcf7-checkbox' ).find( s ).each( function() {
            var label = $( this ).find( '.wpcf7-list-item-label' ).text();

            items.push( label || this.value );
        } );

        klass = 'cf7-cb-summary-' + klass;
        $form.find( '.' + klass ).remove();

        s = getSummaryHtml( title, items, klass );
        items = undefined;

        $form.find( '.cf7-checkbox-summary' ).append( s )
            .show();
    }

    $( 'form.wpcf7-form:has(.cf7-checkbox-summary)' ).each( function() {
        $( this ).find( '.wpcf7-checkbox', '.acc-container' ).each( function() {
            var s = 'input[name$="[]"]',
                title;

            title = $( this ).closest( '.acc-container' )
                .prev( '.acc-trigger' ).text() || 'Other';

            $( this ).find( s ).on( 'change', function() {
                displaySummary( this, title );
            } );
        } );
    } );
} );

或者你可以download it here。

将其上传到您的网站（例如上传到 wp-content / themes / your-theme / js ），然后从包含相关表单的网页加载它。（如果您需要帮助，请告诉我页面ID或ID，我会为您编写PHP代码段。）

接下来，将此代码添加到CF7表单模板中的任何位置，您可以在其中显示摘要：

<div class="cf7-checkbox-summary">
    <h4>Your Preferred Recipes</h4>
    <noscript>Please enable JavaScript.</noscript>
</div>

（您可以修改上述代码中的其他部分，但在class属性中保留 cf7-checkbox-summary 。）

file here包含有关摘要外观的评论，默认情况下如下（在Twenty Seventeen 1.4上）：

[编辑]这里是PHP代码段，可以在您指定的页面上正确加载自定义JS文件 :(将片段添加到主题的函数中.php 文件。）

// Enqueues the JS file for the CF7 checkbox summary.
add_action( 'wp_enqueue_scripts', function() {
    // Enqueues only on specific pages. Set/edit the page IDs below.
    $page_ids = array( 7432, 9108, 9120, 9114, 9125, 9130, 9133, 9138 );

    if ( is_page( $page_ids ) ) {
        // Here I assumed the JS file is saved as cf7-checkbox-summary.js in
        // wp-content/themes/your-theme/js/, where "your-theme" is the theme
        // folder name. If necessary, edit the path.
        wp_enqueue_script( 'cf7-checkbox-summary', get_theme_file_uri( '/js/cf7-checkbox-summary.js' ), array( 'jquery' ), '20180303' );
    }
} );

创建选中复选框的摘要

1 个答案: