将变量值粘贴到图像src

时间:2017-05-28 14:56:39

标签: javascript jquery html image src

我有这个jQuery / Javascript-Code

    <style type="text/css">
    #baseurl{visibility: hidden!important;}
    #options{visibility: hidden!important;}
    #key{visibility: hidden!important;}
    </style>
    <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

    $(document).ready(function() {

    $("#cityoutput").val($.trim($('td.ms-formlabel:contains("City")').siblings(".ms-formbody").text()));
    $("#stateoutput").val($.trim($('td.ms-formlabel:contains("State")').siblings(".ms-formbody").text()));

    var cityoutput = $("#cityoutput").val();
    var stateoutput = $("#stateoutput").val();
    var baseurl = $("#baseurl").val();
    var options = $("#options").val();
    var key = $("#key").val();

    $("#mapbutton").click(function() {

    alert(baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key);

    });

    });

    </script>

    <input disabled="disabled" id="cityoutput" maxlength="255" min="1"/>&#160;
    <input disabled="disabled" id="stateoutput" maxlength="255" min="1"/>
    <input id="mapbutton" type="button" value="Show url"/>
    <input disabled="disabled" id="baseurl" value="https://maps.googleapis.com/maps/api/staticmap?center="/>
    <input disabled="disabled" id="options" value="&amp;zoom=16&amp;size=600x300&amp;maptype=roadmap&amp;format=png&amp;markers=color:red%7C"/>
    <input disabled="disabled" id="key" value="xxxxxxxxxxxxxxxx"/> 

在警报线上我需要改变一些东西。这是为我构建一个URL,我需要为图像创建的URL src =&#34;&#34;。

如何将URL粘贴为但仅当我点击我的按钮?

我认为这很简单,但我不明白。

提前致谢。

1 个答案:

答案 0 :(得分:0)

我无法帮助您,但根据您的代码,我认为这就是您想要的。

希望这有帮助。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
    #baseurl{visibility: hidden!important;}
    #options{visibility: hidden!important;}
    #key{visibility: hidden!important;}
    </style>
    <script language="javascript" src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

    $(document).ready(function() {

    $("#cityoutput").val($.trim($('td.ms-formlabel:contains("City")').siblings(".ms-formbody").text()));
    $("#stateoutput").val($.trim($('td.ms-formlabel:contains("State")').siblings(".ms-formbody").text()));

    var cityoutput = $("#cityoutput").val();
    var stateoutput = $("#stateoutput").val();
    var baseurl = $("#baseurl").val();
    var options = $("#options").val();
    var key = $("#key").val();

    $("#mapbutton").click(function() {

    alert(baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key);

    var src_url=baseurl + cityoutput + "," + stateoutput + options + cityoutput + "," + stateoutput + key;
  
    //pasting the url in img src
    $("#url_target").attr('src',src_url);

    });

    });

    </script>

    <input disabled="disabled" id="cityoutput" maxlength="255" min="1"/>&#160;
    <input disabled="disabled" id="stateoutput" maxlength="255" min="1"/>
    <input id="mapbutton" type="button" value="Show url"/>
    <input disabled="disabled" id="baseurl" value="https://maps.googleapis.com/maps/api/staticmap?center="/>
    <input disabled="disabled" id="options" value="&amp;zoom=16&amp;size=600x300&amp;maptype=roadmap&amp;format=png&amp;markers=color:red%7C"/>
    <input disabled="disabled" id="key" value="xxxxxxxxxxxxxxxx"/>
    
    <img id='url_target'/>