Question

你好我正在使用wordpress CMS，我正在开发一个自定义模板。我的问题是jQuery在从json接收数据后无法正常工作并将它们附加到文档中。

我的代码如下。

function add_cover( button_class, event_type ){
    $( '.table-insurance-covers' ).on( event_type, '.add-cover', function(){

        console.log("HAS COVER : ");
        console.log($(this).data( "custom-value" ));

        if($(this).data( "custom-value" ) == 0 ){

            //Change the text
            $(this).text( "Αφαίρεση" );

            //Change button effect
            $(this).removeClass( "btn-success" );
            $(this).addClass( "btn-danger" );

            //Change the custom value 
            $(this).data( "custom-value", 1 );

            //Change the price, packet price + extra cover = result
            var packet_price = $(this).closest('span.packet-price').text();
            console.log(packet_price);
        }else{

            //Change the text
            $(this).text( "Προσθήκη" );

            //Change button effect
            $(this).removeClass( "btn-danger" );
            $(this).addClass( "btn-success" );

            //Change the custom value 
            $(this).data( "custom-value", 0 );
        }
    });
}

<table class="table table-bordered table-striped table-insurance-covers">
    <thead>
    <tr>
        <th>Τύπος</th>
        <th>Όνομα Κάλυψης</th>
        <th>Ποσό</th>
        <th>Προσθήκη / Αφαίρεση</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="text-center"><i class="fa fa-truck"></i></td>
        <td>Οδική Βοήθεια</td>
        <td>&euro; <span class="cover-price"> 17 </span></td>
        <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td>
    </tr>
    <tr>
        <td class="text-center"><i class="fa fa-truck"></i></td>
        <td>Θραύση Κρυστάλλων</td>
        <td>&euro; <span class="cover-price"> 29 </span></td>
        <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td>
    </tr>
    <tr>
        <td class="text-center"><i class="fa fa-truck"></i></td>
        <td>Μερική Κλοπή</td>
        <td>&euro; <span class="cover-price"> 65 </span></td>
        <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td>
    </tr>
    <tr>
        <td class="text-center"><i class="fa fa-truck"></i></td>
        <td>Ολική Κλοπή</td>
        <td>&euro; <span class="cover-price"> 78 </span></td>
        <td class="text-center"><a class="btn btn-success btn-sm add-cover" href="javascript:void(0)" data-custom-value="0">Προσθήκη</a></td>
    </tr>
    </tbody>
</table>

我的追加功能。

function create_new_packet( company_name, covers, packet_name, packet_price, extra_covers ){
    //TO DO LIST, take data in covers variable from json
    covers = '<li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li>';

    var output_html = '<li class="booking-item"><span><div class="row"><div class="col-md-3"><div class="booking-item-car-img"><img src="http://www.eurolinksa.gr/wp-content/uploads/eisllogogoogle.jpg" alt="Image Alternative text" title="Image Title"/></div></div><div class="col-md-6"><small>Καλύψεις πακέτου</small><ul class="booking-item-features booking-item-features-sign insurance-covers clearfix"><li rel="tooltip" data-placement="top" title="Αστική Ευθύνη Έναντι Τρίτων"><i class="fa fa-male"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Θραύση κρυστάλλων σε Α κίνδυνο έως 1.000€"><i class="im im-car-window"></i><span class="booking-item-feature-sign"></span></li><li rel="tooltip" data-placement="top" title="Οδική Βοήθεια"><i class="fa fa-truck"></i><span class="booking-item-feature-sign"></span></li></ul></div><div class="col-md-3 text-center"><span class="booking-item-price packet-price">&euro; ' + packet_price + '</span><span></span><p class="booking-item-flight-class">' + packet_name + '</p><span class="btn btn-primary w100pc">Αγορά</span></div></div></span><div class="row" class="mr0 ml0"><div class="panel-group" id="accordion-' + packet_name + '"><div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a style="text-decoration: none;" data-toggle="collapse" data-parent="#accordion-' + packet_name + '" href="#' + packet_name + '"><span class="ml20">Πρόσθεσε Καλύψεις</span></a></h4></div><div class="panel-collapse collapse" id="' + packet_name + '"><div class="panel-body"><table class="table table-bordered table-striped table-insurance-covers"><thead><tr><th>Τύπος</th><th>Όνομα Κάλυψης</th><th>Ποσό</th><th>Προσθήκη / Αφαίρεση</th></tr></thead><tbody>' + extra_covers + '</tbody></table></div></div></div></div></div></li>';

    jQuery('.insurance-results-list').append(output_html);
}

我曾尝试委派该活动，但没有成功。我该如何解决这个问题？

Answer 1

在create_new_packet函数中，您使用＆＃39; jQuery＆＃39;附加输出html。在add_cover功能中，您使用＆＃39; $＆＃39;与你的大多数jQuery函数。 Wordpress要求jQuery代码使用＆＃39; jQuery＆＃39;字符串而不是＆＃39; $＆＃39;。尝试使用＆jQuery＆＃39;替换所有美元符号。

因此$( '.table-insurance-covers' )变为jQuery( '.table-insurance-covers' )

如果您想使用＆＃39; $＆＃39;签收请查看此链接：https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/。

追加到

1 个答案: