Question

我正在尝试使用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>

Answer 1

尝试：

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

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

使用jQuery或纯Javascript显示带换行符的Wordpress短代码

1 个答案: