ошибка при получении значения из списка в HTML? - PullRequest
0 голосов
/ 15 марта 2011

мы создаем одно мобильное приложение jQuery в этом приложении, мне нужно привязать данные веб-сервиса к списку в HTML, и когда я нажимаю на первые элементы в списке, он перенаправляется на вторую страницу, которую я создал на той же странице, отделеннойОтметьте тег и отобразите соответствующую информацию, которую я выбрал из списка.В дополнение к этому я сохранил результат веб-службы в массиве.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title><br />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript">
function GetSelectedValut()
 {
var list_value = $(this).attr('searchlist');
alert(list_value);
   }
</script>
</head>
<body>
<!-- Page one starts-->
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>Header </h1>
    </div>
    <div data-role="content" id="page1content">
         <ul data-role="listview" data-inset="true" id="searchlist">
            <li id="search">
                <a href="#pagetwo" value="Selected one" onclick="GetSelectedValut()">Selected one</a>
             </li>
            <li id="search1" onclick="GetSelectedValut()">
                <a href="#detailpage">Selected two</a>
            </li>
            <li>
                <a href="#detailpage">Selected three</a>
            </li>
            <li>
                <a href="#detailpage">Selected four</a>
            </li>
            <li>
                <a href="#detailpage">Selected five</a>
            </li>
            <li>
                <a href="#detailpage">Selected six</a>
            </li>

        </ul>
    </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- Page one ends-->
<!-- Page two starts-->
<div data-role="page" id="pagetwo">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
    Welcome to Div two
        </div>
    <div data-role="footer">
        <h1>Footer</h1>
    </div>
</div>
<!-- page two ends -->
</body>
</html>

Sample image

Ответы [ 2 ]

3 голосов
/ 15 марта 2011

Нет атрибута с именем "seachlist" ...

Вы присвоили один и тот же идентификатор нескольким элементам ... это вызовет проблемы ...

Если вы пытаетесь получитьтекст тега, затем измените #detailpage на .detailpage и затем используйте что-то вроде этого:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    alert($(this).text());
  });
});
</script>

Преимущество: в вашем коде нет «onclick» ... это называется ненавязчивым javascript, и этокруче, чем испортить свой HTML с помощью JavaScript.

Еще лучше, чтобы передать значение, вместо того, чтобы беспокоиться о содержании ссылки, назначить любое значение, которое вы хотите, идентификатору элемента и получить его.

Наслаждайтесь.

Jquery Refs: .ready: http://api.jquery.com/ready/

.bind: http://api.jquery.com/bind/

.text: http://api.jquery.com/text/

ОБНОВЛЕНИЕ: Идентификатор, который вы хотитеобновить некоторый div на странице с текстом, который мы получили, это просто:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo').append(thetext);
  });
});
</script>

http://api.jquery.com/append/

При добавлении текст будет добавлен бесконечно, до конца элемента.

Или, если вы хотите обновить определенную часть div страницы 2, вам нужно добавить к нему класс, например .content, и тогда вы можете сделать это:

<script type="text/javascript">
$(document).ready(function() {
  $('.detailpage').bind('click', function() {
    var thetext = $(this).text();
    $('div#pagetwo.content').html(thetext);
  });
});
</script>

.html заполнитэлемент с тем, что вы передаете.

http://api.jquery.com/html/

Если вы хотите обернуть содержимое в тег абзаца или что-то перед отправкой:

$('div#pagetwo.content').html('<p>' + thetext + '</p>');
1 голос
/ 23 марта 2011

Попробуйте это, я уверен, вы получите результат:

<ul data-role="listview" data-inset="true" id="searchlist">
                <li>
                    <a href="#" id="selected one">Selected one</a>
                 </li>

    </ul>




 $('#searchlist li a').bind("click",function() 
      {

          var selectedId = $(this).attr("id");
          alert("your selected ID is "+ selectedId);

      });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...