Question

此页面当前正在加载页面时显示来自rss Feed的“all”类别的数据。我的问题是我希望用户选择和显示几个类别。共有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>

Answer 1

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

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

<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块来使代码按原样运行。但你会明白如何操纵它。

显示jQuery复选框选择

1 个答案: