在div元素中调用JQuery函数

Question

In my html files is invisible element:

<div class="field">
     <div id="warring" style="color:red; display:none;">
        warrning text
     </div>
</div>

and function:

function showStepsWarrning(){
  $('warring').show();
}

I need to call this function in if statement from option component, tried to do this by:

<option #if(${show.value}) window["showStepsWarrning"]()#end>
  $!project.key.name
</option>

but window["showStepsWarrning"]() doesn't work.

How is it posisble to solve my problem?

Answer 1

You have to use # for selecting the element by id. your code shoule be :

function showStepsWarrning(){
    $('#warring').show();
}

Answer 2

I think you are trying to achieve this. I am calling showStepsWarrnings() on selection of options and changing the alert colour accordingly. http://codepen.io/shivk/pen/ENqwRP

 function showStepsWarrning1(){ $('#warring').show(); $("#warring").css("color", "red"); } function showStepsWarrning2(){ $('#warring').show(); $("#warring").css("color", "blue"); } function showStepsWarrning3(){ $('#warring').show(); $("#warring").css("color", "green"); } var options = [{"value" : "1", "display" : "One", "fn" : function() { console.log("One clicked");alert("one");} }, {"value" : "2", "display" : "Two", "fn" : function() { console.log($(this).val() + " clicked"); showStepsWarrning1();} }, {"value" : "3", "display" : "Three", "fn" : function() { console.log("Three clicked");showStepsWarrning2(); } }, {"value" : "4", "display" : "Four", "fn" : function() { console.log("Four clicked"); showStepsWarrning3();} }]; var $select = $("select").on("click keyup", function() { var opt = this.options[this.selectedIndex]; $(opt).data("fn").call(opt); }); $.each(options, function(i, val) { $select.append( $("<option/>").attr("value", val.value) .text(val.display) .data("fn", val.fn) ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <select></select> <div class="field"> <div id="warring" style="color:red; display:none;">warrning text</div> </div>