0

一旦页面加载，此网页当前正在显示来自 rss 提要的“全部”类别的数据。我的问题是我希望用户选择和显示几个类别。共有 10 个类别，每个类别对应一个单独的 rss 提要。谁能解释我如何处理这个事件？另外，如果选择了其中一个类别，它会自动覆盖当前显示的数据吗？如果需要，我会详细说明任何不清楚的部分。谢谢！

<!DOCTYPE html> 
<html>

<head>

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.ajax({
            type: 'GET',
            url: '/example',
            dataType: 'xml',
            success: function (xml) {
                $(xml).find("item").each(function () {
                    var title = $(this).find("title").text();
                    var description = $(this).find("description").text();
                    var linkUrl = $(this).find("link").text();
                    //var link = "<a href='" + linkUrl + "' target='_blank'>Read More<a>";
                      var displaytitle = "<a href='" + linkUrl + "' target='_blank'>" + title + "</a>"  
                    $('#feedContainer').append('<h3>'+displaytitle+'</h3><p>'+description+'</p>');

                });
            }
        });
});
</script>

</head> 
<body> 

<div data-role="page" id="page">
<!-- /field panel -->
    <div data-role="panel" id="fieldpanel" data-position="left" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
           <fieldset data-role="controlgroup">
        <legend>Categories</legend>
        <input type="checkbox" name="checkbox-bio" id="checkbox-bio">
        <label for="checkbox-bio">Bioengineering</label>
        <input type="checkbox" name="checkbox-com" id="checkbox-com">
        <label for="checkbox-com">Communications</label>
        <input type="checkbox" name="checkbox-eleP" id="checkbox-eleP">
        <label for="checkbox-eleP">Electrical/Power</label>
         <input type="checkbox" name="checkbox-eleD" id="checkbox-eleD">
        <label for="checkbox-eleD">Electronics/Design</label>
         <input type="checkbox" name="checkbox-nano" id="checkbox-nano">
        <label for="checkbox-nano">NanoEngineering</label>
         <input type="checkbox" name="checkbox-opt" id="checkbox-opt">
        <label for="checkbox-opt">Optics/Display</label>
         <input type="checkbox" name="checkbox-semi" id="checkbox-semi">
        <label for="checkbox-semi">Semiconductors</label>
    </fieldset>
        </ul>
    </div><!-- /field panel -->

      <!-- /settings panel -->
     <div data-role="panel" id="settingspanel" data-position="right" data-display="push">
        <ul data-role="listview" data-inset="true" data-filter="false">
          <li><a href="http://">Join IEEE</a></li>
          <li><a href="http://"> subscription services</a></li>

        </ul>
    </div><!-- /settings panel -->


    <div data-role="header" data-theme="b">
    <a href="#fieldpanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Menu</a>
    <a href="#settingspanel" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Settings</a>

    <h1>MOBILE</h1>

</div>
    <div data-role="content">   
        <div id="feedContainer"></div>  
        <h3></h3>
        <p></p>

    </div>
    <div data-role="footer">
        <h4>Advertisements</h4>
    </div>
</div>


</body>
</html>
4

1 回答 1

0

我假设您想获取有关此代码的基本信息！

好的，首先要处理的是要显示的数据的类型。

<input type="checkbox" id="1" />
<input type="checkbox" id="2" />

让我们从 2 而不是 10 开始！jQuery 代码很容易理解。

$('input[type=checkbox]').click(function () { // click on checkbox
   var val = $(this).attr('id'); // get its id as value
   if(val == '2') {
      $('someelement).html('2 was selected');
      $('#1').prop('checked', false); // unselect the other one
   }
}

因此，这是在复选框上发生单击事件时将执行的基本代码。现在在您的代码中，您将使用 ajax 之类的东西，然后在.html()事物之前添加 ajax 请求代码并在那里编写响应。

要更新正在显示的内容，您只需要使用一个元素作为应用程序的基本剪贴板。为什么？因为每次获取数据时，都需要将当前内容替换为该内容，这样您将仅获取当前数据；选定的数据。

让我们从您的代码中尝试一个复选框：

<input type="checkbox" name="checkbox-bio" id="checkbox-bio">
<label for="checkbox-bio">Bioengineering</label>
<input type="checkbox" name="checkbox-com" id="checkbox-com">
<label for="checkbox-com">Communications</label>

现在让我们处理 jQuery

$('input[type="checkbox"]').click(function () {
  // and all others will be here just as they are.. to check the id
  // your ajax request is perfect, just copy paste that here..:)
});

但只需要在那里进行更改，而不是发送相同的请求，尝试在那里再添加一件东西，

$.ajax({ 
  // url and datatype here,
  data: value
  // success function goes here
});

请注意，该值是我们从复选框中获取的变量。它将与请求一起发送，这样您就可以只处理 RSS 的必要部分而留下所有其他部分，就像一个if else块一样。

这是这个http://jsfiddle.net/afzaal_ahmad_zeeshan/KU9JT/的工作小提琴。

但我很抱歉，我没有包含 if else 块以使代码按预期工作。但你会明白如何操纵它。

于 2013-11-13T18:13:56.137 回答