javascript - Trying to change images on click -
this "button" want change icon "open" , "close" when it's clicked again
<h:panelgroup layout="block" rendered="#{pesquisa}" style="float:left; padding-top:2px;"> <h:outputlink id="linktogglecontrol" value="#"> <rich:togglecontrol event="click" targetpanel="painelfiltro" targetitem="#{filtrobean.activeitem eq 'ativo'? 'vazio' : 'ativo'}" /> <h:graphicimage id="imagem-pesquisa" value="/resources/images/interface/pesquisa-barra-expandida.png" style="border:none; cursor:pointer;"/> <rich:tooltip layout="block" direction="auto"> <h:outputtext value="#{msg.acspesquisar}" /> </rich:tooltip> </h:outputlink> </h:panelgroup>
script:
<script type="text/javascript"> jquery(function($) { $('.linktogglecontrol').on({ 'click': function() { var src = ($('#imagem-pesquisa').attr('value') === '/resources/images/interface/pesquisa-barra-expandida.png') ? '/resources/images/interface/pesquisa-barra-expandir.png' : '/resources/images/interface/pesquisa-barra-expandida.png'; $('#imagem-pesquisa').attr('value', src); }}); </script>
i have done sort of thing several times in jquery, know possible. have had @ script, , there few things differently. however, not accustomed code using. suggestion how work on html4, xhtml, html5.
here way it:
$(function(){ $('body').on('click','.linktogglecontrol', function() { var src = ($('#imagem-pesquisa').attr('value') == '/resources/images/interface/pesquisa-barra-expandida.png')? '/resources/images/interface/pesquisa-barra-expandir.png': '/resources/images/interface/pesquisa-barra-expandida.png'; $('#imagem-pesquisa').attr('src', src); }); });
where have used 'body'
, have used parent of .linktogglecontrol
Comments
Post a Comment