Javascript和Jquery mobile添加类

Javascript and Jquery mobile add class

本文关键字:添加 mobile Jquery Javascript      更新时间:2024-05-07

我搜索了如何在javascript中将类广告到div,并找到了一些关于其他javascript或jquery的指令,但似乎都不起作用。

我尝试的是一个简单的代码:

    <!DOCTYPE html> 
<html> 
<head> 
        <title>XY</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name=viewport content="user-scalable=no,width=device-width" />                
         <link rel="stylesheet" href="files/jquery.mobile-1.4.0-rc.1.min.css"/>
         <script src="files/jquery-2.0.3.min.js"></script>
        <script src="files/jquery.mobile-1.4.0-rc.1.min.js"></script>        

        <script type="text/javascript" src="cordova.js"></script>
</head> 
<body> 

<!--SLO STRAN      ################################################ #################-->
<div data-role="page" id="slo" data-theme="a">
 <div data-role="header" data-position="fixed" >
    <a href="#prvastran" data-role="button" data-icon="home">Domov</a>
    <h1>ABC</h1>
    <a href="" onclick="osvezipodatke()" data-role="button" data-icon="search">Osveži</a>

  </div><br>
  <div id="osvezitev_cas_slo" style="margin-left:10px;"></div><br>

<div data-role="collapsible-set">    

<!--boja-->
<div data-role="collapsible" data-collapsed="true">
    <h3> <div class="ui-grid-a">
        <div class="ui-block-a" id="postaja_boja" style="width: 65%;"></div>
        <div class="ui-block-b" id="veter_boja" style="width: 35%;"></div>
      </div>
    </h3>
      <div class="ui-grid-b">
        <div class="ui-block-a" id="max_boja" style="width:50%;" "margin-left:10px"></div>
        <div class="ui-block-b" id="maxob_boja" style="width: 50%;"></div>
      </div>
    <div id="tmp_boja"></div>
    <div class="ui-grid-c">
        <div class="ui-block-a" id="mmv1h_boja" style="width:50%;" "margin-left:10px"></div>
        <div class="ui-block-b" id="mmv24h_boja" style="width: 50%;"></div>
      </div>
</div>


    <div data-role="footer" data-position="fixed">
        <a href="#slo" data-role="button" data-icon="grid" data-iconpos="top" style="width: 15%;">SLO</a>
    </div>
</div>
</div>


</body>
</html>


   <script>

$('#veter_boja').addClass('class_two');

</script>

我只是在"veter_boja"中添加了一个类,但它似乎不起作用。我做错了什么?

因此,正如@Jakadinho所指出的,您的脚本没有运行,因为它从未被调用。

您应该将javascript脚本放在一个函数中,并根据以下(尽管不相关)示例在页面加载时调用它http://www.w3schools.com/jsref/event_onload.asp教程示例。

  <!DOCTYPE html>
  <html>
     <head>
     </head>
      <body onload="myFunction()">
          <h1>Hello World!</h1>
      </body>
  </html>
  <script>
     function myFunction()
     {
        alert("Page is loaded");
     }
  </script>

我试图足够接近您的问题,将脚本从html元素中取出,结果成功了。

因此,将onload方法附加到主体,使脚本成为一个函数,并在onload内部调用它