单击JQueryMobile元素时如何在javascript对象中存储值

时间:2020-12-15 21:38:36

I'm wondering how to store a value in a custom javascript object when a JQueryMoblile element, such as from a control group, is clicked. Then, when JQM transitions to another page, I would like to retrieve the value from the javascript object and display it or otherwise use it. (for the purposes of asking the question, I will just display it)

我想知道如何在单击JQueryMoblile元素(例如来自控件组)时将值存储在自定义javascript对象中。然后,当JQM转换到另一个页面时,我想从javascript对象中检索值并显示它或以其他方式使用它。 (为了提出问题,我只是展示它)

javascript code:

function valueholder()
{
    this.value = "";
}

html code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">

 <title>JQM javascript test</title> 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

 <link rel="stylesheet" href="/css/jquery.mobile-1.4.5.min.css"/>
 <script src="/js/jquery-2.1.4.min.js"></script>
 <script src="/js/jquery.mobile-1.4.5.min.js"></script>
 <script src="/js/valueholder.js"></script>
</head>
<body>
 <div id="home" data-role="page" data-title="Home Page">
  <div data-role="header" data-position="fixed">
   <h1>Main</h1>
  </div>
  <div data-role="content"><p>First Page</p></div>
  <div data-role="controlgroup">
   <!-- when either of these below are clicked, I would like to set the create a valueholder  -->
   <!--  object from the .js file and set either X or Y based on which is clicked -->
   <a href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value X</a>
   <a href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value Y</a>
  </div>
 </div>
 <div id="detailpage" data-role="page" data-title="Detail Page">
  <div data-role="header" data-position="fixed">
   <h1>Detail</h1>
   <a href="#home" data-icon="home" data-iconpos="notext" data-transition="slide" data-direction="reverse">Home</a>
  </div>
  <div data-role="content">
   <p>Detail Page</p>
   <!-- then I would like to retrieve the value from the valueholder object and display it here -->
   <p>Value Is: (would like to display the value from javascript here)</p>
 </div>
</body>
</html>

1 个解决方案

#1


0  

Add an id or class to the elements you can click. For example, #xValue and #yValue. Then add a class or id to where you want to put the value. For example, #putValueHere

在您可以单击的元素中添加id或类。例如,#xValue和#yValue。然后将类或ID添加到要放置值的位置。例如,#putValueHere

<!-- when either of these below are clicked, I would like to set the create a valueholder  -->
<!--  object from the .js file and set either X or Y based on which is clicked -->
<a id="xValue" href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value X</a>
<a id="yValue" href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value Y</a>

And

<!-- then I would like to retrieve the value from the valueholder object and display it here -->
<p id="putValueHere">Value Is: (would like to display the value from javascript here)</p>

Then

$("#xValue").click(function(){
    $("#putValueHere").html("Value Is: X");
});

$("#yValue").click(function(){
    $("#putValueHere").html("Value Is: Y");
});

#1


0  

Add an id or class to the elements you can click. For example, #xValue and #yValue. Then add a class or id to where you want to put the value. For example, #putValueHere

在您可以单击的元素中添加id或类。例如,#xValue和#yValue。然后将类或ID添加到要放置值的位置。例如,#putValueHere

<!-- when either of these below are clicked, I would like to set the create a valueholder  -->
<!--  object from the .js file and set either X or Y based on which is clicked -->
<a id="xValue" href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value X</a>
<a id="yValue" href="#detailpage" data-transition="slide" data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="right">Go To Detail Page - With Value Y</a>

And

<!-- then I would like to retrieve the value from the valueholder object and display it here -->
<p id="putValueHere">Value Is: (would like to display the value from javascript here)</p>

Then

$("#xValue").click(function(){
    $("#putValueHere").html("Value Is: X");
});

$("#yValue").click(function(){
    $("#putValueHere").html("Value Is: Y");
});