2

我有一个小应用程序，当用户键入名称并单击 search(Submit) 时，它基本上会搜索“药物”。控制器将调用数据库中的一个小函数，并显示<li></li>在搜索下的更多元素中找到的所有相关数据<li></li>。

这是第一个<li></li>包含搜索输入字段和提交按钮的内容。

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider" style="text-align:center">Search</li>
    <li>
        <div class="ui-grid-b">
            <div class="ui-block-a"><input type="Search" id="medName" name="medName" placeholder="Medicine Name..." /></div>
            <div class="ui-block-c"><input id="Submit" type="Submit" data-icon="search" data-iconpos="notext" /></div>
        </div>
    </li>

下面是@foreach调用控制器并用找到的数据填充列表视图的语句：

@foreach (//Code that connects to database in controller)ViewBag.MedicineList)
    { 
        <li><a href="#" onclick="storeMedName(); return true;" >
        <p><strong id="selectedMed">@m.DESC</strong></p>
        </a>
        </li>
    }
</ul>

搜索工作完美，当我点击任何生成的<li></li>. 这应该采用在 中找到的药物名称<strong id="selectedMed">@m.DESC</strong>并将其保存到 sessionStorage 中，以显示在最终将被重定向到的下一页上。

然而，尽管使用了以下简单的 JavaScript，它只会保存找到的第一个<li></li>，无论我点击哪个。

function storeMedName() {

        var medicine = document.getElementById('selectedMed').innerHTML;

        if (window.sessionStorage) {

            try {
                sessionStorage.setItem('medicineName', medicine);

                //To check if it got saved
                document.getElementById("result").innerHTML = "You have saved " + sessionStorage.medicineName + " to the session.";

            }
            catch (err) {
                // error code 22 QUOTA_EXCEEDED_ERR ran out of space
                if (err.code == QUOTA_EXCEEDED_ERR) {
                    result.innerHTML = 'sessionStorage ran out of memory.';
                    // perform any other handling we want to here
                }
            }
        }
        else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }

    }

我尝试通过稍微修改 JS 来使用 localStorage，但同样的问题仍然存在。在互联网上寻找解决方案，我只能找到使用静态元素的文章。我相信我错过了一些非常简单的东西，但这是我第一个处理此类功能的应用程序。

我的第一个想法是它的行为是这样的，因为id="selectedMed"每种找到的药物都是一样的，所以它必然会保存 JS 找到的第一个药物，但我似乎无法解决一种可以帮助我解决问题的方法这个问题。

任何想法或解决方案将不胜感激！如果有任何不清楚的地方，请告诉我。

4

1 回答 1

2

这是对这个问题评论的跟进。

此处不需要索引计数器，也不应将内联 javascript 与 jQuery Mobile 一起使用。这只是一种不好的做法，因为它在某些情况下可能会严重错失行为。

解决方案

假设这是您生成的列表视图，我给它一个名为test-listview的 ID （它将在 javascript 中使用）：

HTML：

<ul data-role="listview" data-inset="true" id="test-listview">
    <li><a href="#">
        <p><strong id="selectedMed">Element 1</strong></p>
        </a>
    </li>                    
    <li><a href="#">
        <p><strong id="selectedMed">Element 2</strong></p>
        </a>
    </li>
    <li><a href="#">
        <p><strong id="selectedMed">Element 3</strong></p>
        </a>
    </li>                    
</ul>

如果您想找出所选列表视图元素的文本，您可以这样做：

Javascript

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#test-listview li', function(){ 
        alert($(this).find('#selectedMed').text());
    });
});

工作示例

这是一个有效的 jsFiddle 示例：http: //jsfiddle.net/xNJ7A/

于 2013-11-08T15:31:31.013 回答