我如何在jquery mobile中隐藏和显示图像

时间:2013-08-29 11:44:37

标签: html5 jquery-mobile

我在phonegap的帮助下制作一个Android应用程序。我需要帮助我可以隐藏图像或在我想要时显示图像

当我的切换开关关闭时,如果我的切换开关打开,那么第三页中的图像应隐藏,然后它将显示图像

请告诉我如何做到

在HTML5中: -

    <div data-role="page" id="page1">
    <div data-role="content">
        <select name="toggleswitch1" id="toggleswitch1" data-theme="" data-role="slider">
            <option value="off">Off</option>
            <option value="on">On</option>
        </select>
        <a data-role="button" id="button1" data-inline="true" href="#" onclick="clickfn();">Button</a>
    </div>

  <div data-role="page" id="page2">
    <div data-role="content">
         <p>some text</p><p>some text</p>
        <a data-role="button" id="button2" data-inline="true" href="#page3" >Button</a>
    </div>

<div data-role="page" id="page3">
    <div data-role="content">
        <p>some text</p><p>some text</p>
        <img src="xyz image" />
                  <a data-role="button" id="button3" data-inline="true" href="#page1" >Button</a>
    </div>

在jquery中的

: -

  $(document).unbind('pageinit').bind('pageinit', function () {
          clickfn(); 
        });


    function clickfn(){
       $('#button1').click(function(){
                  if($("#toggleswitch1 option:selected").val() == 'off'){
                  $.mobile.changePage("#page2");
                  }else{
                  $.mobile.changePage("#page2");
                  }
                });
    }

2 个答案:

答案 0 :(得分:0)

在你的img中添加一个id

  <img id="myimg" src="xyz image" />

并在代码中切换可见性

function clickfn(){
       $('#button1').click(function(){
                  if($("#toggleswitch1 option:selected").val() == 'off'){
                      $("#myimg").hide ();
                  }else{
                      $("#myimg").show ();
                  }
                });

}

答案 1 :(得分:0)

有一个名为.hide和.show的属性,您可以在其中显示或隐藏图像。 让我们说你的图像的id是img,然后是

$('#button).click(function(){
              if($("#toggleswitch1 option:selected").val() == 'off'){
                  $("#img").hide ();
              }else{
                  $("#img").show ();
              }