динамически обрабатывать события jquery

Question

У меня есть список основных сюжетов. скажем, это искусство, наука, торговля. Для каждого основного пара есть несколько предметов. Такие, как для науки, предметы - это математика, биология и т. Д.

Когда пользователь выбирает основной поток, я хочу показать релевантные объекты для выбранного основного потока. Я использую jquery pannels. В основном, когда поток проверяется, активируемые субъекты div будут переключаться.

Я получаю Основной поток и предметы из базы данных. они могут быть изменены (динамические). Итак, как с этим справиться?

Я использовал следующий код. Но это не динамично.

$("#Science").change(function(){ 
    $("#Mathas").slideToggle("fast"); 
}); 
$("#Bio_cience").change(function(){ 
    $("#b").slideToggle("fast"); 

}); 
$("#Pure_Maths").change(function(){ 
    $("#cc").slideToggle("fast"); 

}); 

Я хочу сделать выше сценарий динамическим. Как действовать?

Answer 1

Ваш HTML понравится ...

<div id="1sub" class="sub">sub1</div> 
<div id="2sub" class="sub">sub2</div> 
<div id="3sub" class="sub">sub3</div> 

<div id="stream-1" class="stream" style="display:none;">Stream 1</div> 
<div id="stream-2" class="stream" style="display:none;">Stream 2</div> 
<div id="stream-3" class="stream" style="display:none;">Stream 3</div> 

Теперь в JQuery

$(".sub").click(function(){ 
var subClicked = $(this).attr('id'); 
$(".stream").hide(); 
$("#stream-" + subClicked.substring(0,1)).toggle(); 
}); 

Answer 2

В зависимости от количества, которое требуется загрузить. Это действительно личный выбор, если есть всего несколько записей, тогда вы можете загрузить их в массив при загрузке страницы, для больших наборов данных я бы использовал ajax. Нечто подобное можно загрузить HTML в вашем районе #display

$("#Main_stream_arts").change(function(){ 
    $.ajax({ 
     type: "POST", 
     url: "some.php", 
     dataType: "html", 
     data: { id: $(this).val()} 
    }).done(function(html) { 
     $("#display").html(html); 
    }); 
}); 

Вы также можете изменить тип данных в формате JSON и вывода JSON encodeed строки из PHP

Или сокращенный вариант - в зависимости от того, сколько контроля вы хочу:

$("#Main_stream_arts").change(function(){ 
    $('#display').load('some.php?id='+$(this).val()); 
}); 

Answer 3

Чтобы периодически получать обновления с сервера, вы могли бы использовать AJAX-то вроде этого:

function load_subjects(){ 
    $.ajax({ 
     url: "http://www.example.com/loader", 
     cache: false, 
     success: function(html){ 
      $("#items").html(html); 
     } 
    }); 
} 
setInterval(load_subjects, 240000); 

Answer 4

Вам нужно что-то общее между флажком и DIV, и вы, вероятно, дон Чтобы сделать это, вам нужно сделать еще одну поездку на сервер (через ajax). Вместо этого добавьте атрибут при создании страницы с помощью PHP, а затем используйте метод jQuery data(), чтобы сделать ассоциацию. Например:

<input type="checkbox" data-category="a"> 
<input type="checkbox" data-category="b"> 
<div id="main-stream-art-a">Content A</div> 
<div id="main-stream-art-b">Content B</div> 

<script> 
    $(function(){ 
     $('input[type="checkbox"]').change(function() { 
      var category = $(this).data('category'); 
      $('#main-stream-art-sub-' + category).slideToggle("fast"); 
     }); 
    }) 
</script> 

Answer 5

Вы можете создать структуру HTML, подобную этой, которую вы могли бы дублировать для каждого потока. Это будет полезно, если в вашем HTML есть несколько потоков.

<div class="container"> 
    <div class="header"> 
     <input type="checkbox" value="Electronics" id="electronics" /> 
     <label for="electronics">Electronics</label> 
    </div> 
</div> 

Тогда, предполагая, что ваши данные в базе данных выглядит так,

{ 
    "Electronics": [ 
     "VLSI", 
     "Tele Communication", 
     "Digital Circuits", 
     "Analog Communication" 
    ], 
    "Medicine": [ 
     "MBBS", 
     "MD", 
     "General Surgeon", 
     "Dental" 
    ], 
    "Computers": [ 
     "fuzzy logic", 
     "DataStructures", 
     "JavaScript" 
    ] 
} 

Вы можете получить значение по json["Electronics"] - это, как мы будем моделировать ajax вызов. Тогда ваше событие change будет выглядеть так.

$(".header [type=checkbox]").change(function() { 
    //remove all the older values - not necessary 
    $(".content").slideToggle(500, function() { 
     e.preventDefault(); 
     $(this).remove(); 
    }); 
    //check if youre checking or unchecking 
    if (this.checked) { 
     //choosing header 
     var $header = $(this).closest(".header"); 
     //building container element with ul for subjects in stream 
     var $content = $("<div/>", { 
      "class": "content" 
     }).append("<ul></ul"); 
     var value = this.value; 
     //simulate ajax call - 
     var json = res[value]; 

     //ajax here. result is json 


     //ajax success start - starting here , you could put this in the success function of ajax 
     //construct the lis - u could do it in any way 
     var $li = $.map(json, function (val, i) { 
      return "<li>" + val + "</li>"; 
     }); 
     //add the li to the uls 
     $content.find("ul").append($li); 
     //insert the content after specific header 
     $content.insertAfter($header).promise().done(function() { 
      //wait for the append to happen, else you wont get the animation 
      //open up the content needed 
      $content.slideToggle(500); 
     }); 
     //ajax success end 
    } 
}); 

В основном мы добавляем элемент, содержащий объекты в потоке динамически рядом с заголовком. Таким образом, это поможет, если в вашем HTML несколько потоков.Таким образом, в результате HTML будет выглядеть следующим образом:

<div class="container"> 
    <div class="header"> 
     <input type="checkbox" value="Electronics" id="electronics" /> 
     <label for="electronics">Electronics</label> 
    </div> 
    <div class="content"> 
     <ul> 
     <li>Fuzzy Logic</li> 
     <!--more li's like this--> 
     </ul> 
    </div> 
</div> 

Демо: http://jsfiddle.net/hungerpain/Uyugf/