在javascript中为按钮分配命令参数

在javascript中为按钮分配命令参数,javascript,jquery,html,asp.net,Javascript,Jquery,Html,Asp.net,我试图在java脚本中模拟一个按钮点击,现在我能够点击这个按钮,它可以工作并打开我的模态方法。。。但是我想传递ID和一个命令参数 因此,我想给btn分配一个命令参数,它是传递到函数中的我的ID 有什么帮助或想法吗 Javascript <script type="text/javascript"> function DamageControlModal(ID) { var val = ID //alert(val) $('#&l

我试图在java脚本中模拟一个按钮点击,现在我能够点击这个按钮,它可以工作并打开我的模态方法。。。但是我想传递ID和一个命令参数

因此,我想给btn分配一个命令参数,它是传递到函数中的我的ID

有什么帮助或想法吗

Javascript

<script type="text/javascript">
    function DamageControlModal(ID) {
        var val = ID
        //alert(val)
        $('#<%= btnFake.ClientID %>').click();
    }
</script>

功能损坏控制模式(ID){
var val=ID
//警报(val)
$('#')。单击();
}
HTML

<div id="imageMapDiv" style="margin-left: 100px" runat="server">
                                        <img id="Image-Map" src="/Images/Map/FordTransitVanHighRoof.png" border="0" usemap="#image-maps" alt="" class="map" />
                                        <map name="image-maps" id="ImageMapping" runat="server">
                                            <area id="Roof" onclick="DamageControlModal(this.id);" title="Roof" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="140,534,200,534,279,534,359,536,432,534,486,533,491,578,493,616,489,654,485,666,369,666,220,667,140,668,137,620,138,574" target="_self" />
                                            <area id="Windscreen" onclick="DamageControlModal(this.id);" title="Windscreen" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="139,532,111,531,90,532,71,538,64,552,61,581,62,615,63,648,66,660,80,668,110,671,127,669,138,669,132,615,134,556" target="_self" />
                                            <area id="Bonnet" onclick="DamageControlModal(this.id);" title="Bonnet" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="59,548,30,558,18,565,16,583,16,613,17,633,27,642,48,649,62,654,59,597,60,562" target="_self" />
                                            <area id="FB" onclick="DamageControlModal(this.id);" title="FB" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="553,172,572,172,595,175,602,178,629,178,672,177,688,173,718,172,716,186,715,198,709,205,702,211,678,210,636,211,589,211,573,211,563,208,556,200,554,186" target="_self" />
                                            <area id="RB" onclick="DamageControlModal(this.id);" title="RB" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,434,553,432,555,454,567,465,590,467,619,467,674,465,701,465,714,461,716,454,719,437,718,434,707,433,705,443,702,456,678,456,636,456,588,455,568,456,565,445" target="_self" />
                                            <area id="NSRG" onclick="DamageControlModal(this.id);" title="NSRG" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="626,323,605,323,584,323,577,325,575,332,576,342,576,361,576,370,583,376,594,376,615,377,624,377,626,372,627,343" target="_self" />
                                            <area id="OSRG" onclick="DamageControlModal(this.id);" title="OSRG" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="650,323,666,322,690,321,700,326,699,338,699,360,699,371,690,374,678,376,658,376,647,377,646,350,647,325" target="_self" />
                                            <area id="OSSG" onclick="DamageControlModal(this.id);" title="OSSG" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="395,355,383,345,364,330,354,323,341,321,334,320,326,319,324,321,324,330,325,347,328,360,333,371,348,376,367,379,380,381,388,382,386,374,385,362,387,357,390,354" target="_self" />
                                            <area id="NSSG" onclick="DamageControlModal(this.id);" title="NSSG" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="116,110,111,108,117,101,128,94,140,83,154,75,165,74,177,72,182,76,180,101,177,109,172,120,156,127,134,130,124,131,118,131,116,126,116,116" target="_self" />
                                            <area id="OSM" onclick="DamageControlModal(this.id);" title="OSM" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="536,107,531,118,532,134,540,137,548,137,556,139,559,127,559,120,559,113,559,109,554,110,555,121,552,122,549,122,548,112,548,109,542,108" target="_self" />
                                            <area id="NSM" onclick="DamageControlModal(this.id);" title="NSM" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="723,108,736,106,741,119,741,128,738,134,730,137,720,137,716,140,713,134,713,119,713,110,715,112,716,121,718,124,719,120,720,111" target="_self" />
                                            <area id="OSQ" onclick="DamageControlModal(this.id);" title="OSQ" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="187,294,184,420,185,445,186,453,144,453,139,433,127,418,112,415,95,414,75,418,61,419,29,420,25,374,33,364,41,293" target="_self" />
                                            <area id="OSD" onclick="DamageControlModal(this.id);" title="OSD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="308,307,276,297,232,293,187,292,184,307,185,418,185,442,186,455,309,453" target="_self" />
                                            <area id="NSD" onclick="DamageControlModal(this.id);" title="NSD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="196,58,230,50,275,46,317,44,320,60,320,143,320,193,318,203,196,204" target="_self" />
                                            <area id="NSQ" onclick="DamageControlModal(this.id);" title="NSQ" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="189,292,273,297,309,306,310,368,308,428,308,453,186,453,185,364,186,309" target="_self" />
                                            <area id="OSRD" onclick="DamageControlModal(this.id);" title="OSRD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,695,279,703,281,710,344,711,383,707,389,707,432,637,432" target="_self" />
                                            <area id="OSFD" onclick="DamageControlModal(this.id);" title="OSFD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="406,358,367,325,330,313,311,310,311,371,310,424,309,441,309,455,376,454,382,427,395,417,404,412,410,390" target="_self" />
                                            <area id="NSH" onclick="DamageControlModal(this.id);" title="NSH" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="712,133,702,138,690,139,682,143,682,151,688,157,695,157,713,154" target="_self" />
                                            <area id="OSH" onclick="DamageControlModal(this.id);" title="OSH" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="590,143,568,136,561,134,558,154,580,157,588,153" target="_self" />
                                            <area id="OSFW" onclick="DamageControlModal(this.id);" title="OSFW" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="444,382,478,390,483,393,484,404,467,404,459,403,452,394" target="_self" />
                                            <area id="NSRD" onclick="DamageControlModal(this.id);" title="NSRD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="637,277,580,279,573,279,568,303,563,381,567,387,567,431,597,432,637,433" target="_self" />
                                            <area id="OSRL" onclick="DamageControlModal(this.id);" title="OSRL" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="721,383,715,383,707,388,707,432,719,433" target="_self" />
                                            <area id="NSRL" onclick="DamageControlModal(this.id);" title="NSRL" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="566,388,558,382,554,389,555,432,567,432" target="_self" />
                                            <area id="NSFD" onclick="DamageControlModal(this.id);" title="NSFD" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="195,61,196,170,196,190,196,204,128,205,119,176,109,166,101,165,96,140,99,108,124,88,143,71" target="_self" />
                                            <area id="NSFW" onclick="DamageControlModal(this.id);" title="NSFW" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"2E5D8B","fillOpacity":0.6}' shape="poly" coords="63,132,26,141,21,150,23,158,45,154,52,142" target="_self" />
                                        </map>
                                        <asp:Button ID="btnFake" runat="server" OnCommand="DamageControlModal_OnClick" Style="display: none" />
                                    </div>

一种可能的解决方法是将单击的ID放在
btnFake
属性上

<script type="text/javascript">
    function DamageControlModal(ID) {
        $('#<%= btnFake.ClientID %>').data('value', ID);
        $('#<%= btnFake.ClientID %>').click();
    }
</script>

您可能会发现将单击事件与HTML分开设置而不是内联设置更容易

这应该起作用:

$('#ImageMapping area').click(function(){  

echo('Clicked Area ID: '+this.id);  
DamageControlModal(this.id);  

});
在损伤控制中:

function DamageControlModal(ID) {
        //alert(val)
        $('#'+ID).click();  //to click a button with id = ID
        $('#btnFake').click();  //to click the button in your html
}
请参见基于列表的JS fiddle示例:

我假设,由于您的asp.net标记,您希望回发后代码中的值被隐藏。然后,最简单的解决方案是将该值放入
HiddenField
中,然后您可以将其与
string s=HiddenField1.value一起在代码隐藏中使用点击按钮后

<asp:HiddenField ID="HiddenField1" runat="server" />

<script type="text/javascript">
    function DamageControlModal(ID) {
        $('#<%= HiddenField1.ClientID %>').val(ID);
        $('#<%= btnFake.ClientID %>').click();
    }
</script>

功能损坏控制模式(ID){
$('#').val(ID);
$('#')。单击();
}

Im使用一个名为maphilight的jquery插件。好吧,但与其调用
DamageControlModal
为什么不直接调用你的modal方法呢?看看我的更新,如果你这样做,你可以删除这个fakeBtn,所有aera tagi中的“onclick”都添加了它,并包含了我的方法。但是它似乎不起作用。如果没有显示错误的工作片段,我可以帮你更多。
<asp:HiddenField ID="HiddenField1" runat="server" />

<script type="text/javascript">
    function DamageControlModal(ID) {
        $('#<%= HiddenField1.ClientID %>').val(ID);
        $('#<%= btnFake.ClientID %>').click();
    }
</script>