Отображение выбора флажка jQuery

Эта страница в настоящее время отображает данные из категории «все» из RSS-ленты после загрузки страницы. Мой вопрос в том, что есть несколько категорий, которые я бы хотел, чтобы пользователь выбирал и показывал. Всего 10 категорий, каждый из которых соответствует отдельной ленте rss. Может ли кто-нибудь объяснить, как я обрабатываю это событие? Кроме того, если выбрана одна из категорий, она автоматически отменяет отображение текущих данных? При необходимости я разработаю любые неясные детали. Спасибо!Отображение выбора флажка jQuery

<!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>

источник

2013-11-13 Bacon2305

Предполагаю, что вы хотите получить основную информацию об этом коде!

Хорошо, первое, что нужно обработать, - это тип данных, которые будут отображаться.

<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, затем добавьте код запроса ajax до .html() и напишите ответ там.

Чтобы обновить отображаемый контент, вам понадобится использовать только один элемент в качестве основного буфера обмена для вашего приложения. Зачем? Поскольку каждый раз, когда вы получите данные, вам нужно будет заменить текущий контент на этот, и таким образом вы получите только текущие данные; выбранные данные.

Позволяет попробовать один флажок из кода:

<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-13 18:13:56

Я сейчас читаю это и хочу поблагодарить вас за ваш тщательный ответ! Я дам вам знать, как скоро все пройдет. Ура! – Bacon2305

Конечно, вы можете сказать мне, что там происходит! :) Я буду рад помочь вам. –

Итак, я все еще пытаюсь собрать все вместе, но я не уверен относительно этой части: $ .ajax ({ // url и тип данных здесь, данные: значение // функция успеха здесь }); – Bacon2305

Отображение выбора флажка jQuery

ответ

Смежные вопросы