繁体   English   中英

使用jQuery或纯Java脚本显示带有换行符的Wordpress简码

[英]Display a Wordpress shortcode with line breaks with jQuery or pure Javascript

我正在尝试使用jQuery html()函数显示wordpress简码。

当我输入shorcode时,它会显示一个Google地图。 简码为[locations_map scope="2015-09-01,2015-09-30"]

它显示以下html:

<div class="em-location-map-container"  style='position:relative; background: #CDCDCD; width: 100%; height: 500px;'>
    <div class='em-locations-map' id='em-locations-map-8ec52' style="width:100%; height:100%"><em>Loading Map....</em></div>
    <div class='em-locations-map-coords' id='em-locations-map-coords-8ec52' style="display:none; visibility:hidden;">{"width":"100%","height":"500px","em_ajax":true,"query":"GlobalMapData","random_id":"8ec52"}</div>
</div>  

它显示带有换行符的html代码

当我尝试通过以下方式显示地图时:

jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]');
    });

它显示了html代码,但是有换行符,然后由于换行符而在参数列表后出现了诸如SyntaxError:missing)之类的错误。 如何在一行中显示简码的html?

编辑:这是我放入小部件中的完整代码

<script type='text/javascript' src='http://mysite/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script>
    jQuery(document).on('change', '#monthMap', function () {        
        jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]'.replace(/[\r/\n]+/g, ""));
        });
</script>


<div class="form-group">
    <label for="monthMap" class="col-sm-3 control-label">Select</label>
    <div class="col-sm-6 col-md-6">
        <select class="custom-select" id="monthMap">
            <option value="m0">- All -</option>
            <option value="m1">January</option>
            <option value="m2">February</option>
            <option value="m3">March</option>
            <option value="m4">April</option>
            <option value="m5">May</option>
            <option value="m6">Jun</option>
            <option value="m7">July</option>
            <option value="m8">August</option>
            <option value="m9">September</option>
            <option value="m10">October</option>
            <option value="m11">November</option>
            <option value="m12">December</option>
        </select>
    </div>
</div>

<div id="sakya-map">
[locations_map width="100%" height="500px"]
</div>

尝试:

jQuery('#id-map').html('[locations_map scope="2015-07-01,2015-07-30"]'.replace(/[\r/\n]+/g, ""));
    });

它将用空字符串替换换行符。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM