Я разрабатываю много динамическое выборочное меню, то есть у меня есть меню для брендов, после того, как пользователь выберите бренд, используя JavaScript и Ajax, я буду искать модели, доступные из этого бренда, и добавлю их во второе меню Select. Этот процесс повторяется снова, но на этот раз показывает функции выбранной модели.
Для этого, и поскольку у меня есть много разных областей, которые нуждаются в одной и той же системе, я использую класс с одинаковым именем в каждом меню «Выбор бренда», а другая - в каждом меню «Выбор модели».
<div class='brand_select' id='14'>
<%= f.collection_select :brand, Product.find_all_by_area(14, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
</div>
<div class='model_select'>
<%= f.collection_select :model, Product.find_all_by_area(14), :model, :model, :prompt => 'Choose model' %>
</div>
<div class='brand_select' id='15'>
<%= f.collection_select :brand, Product.find_all_by_area(15, :group => 'brand'), :brand, :brand, :prompt => 'Choose brand' %>
</div>
<div class='model_select'>
<%= f.collection_select :model, Product.find_all_by_area(15), :model, :model, :prompt => 'Choose model' %>
</div>
И javacript:
$('.brand_select').change(function(event) {
// option selected
var brand=$(event.target).find('option:selected').val();
// if none is selected
if (brand == ''){
$(event.target).parent().parent().find('.modelo_select').hide();
$(event.target).parent().parent().find('.caracteristica').hide();
}
else {
$(event.target).parent().parent().find('.modelo_select').show();
// find id to search on the database
var id=$(event.target).parent().attr('id');
// find the target (id of the object)
var target=$(event.target).attr('id');
$.ajax({
type: "POST",
url: "http://"+location.host+"/model/"+brand+"/"+id+"/"+target,
brand: brand,
id: id,
target: target
});
}
});
$('.model_select').change(function(event) {
// find model selected to search on the database
var model=$(event.target).find('option:selected').val();
// find brand selected to search on the database
var brand=$(event.target).parent().parent().find('.marca_select').find('option:selected').val();
// find id to search on the database
var id=$(event.target).parent().parent().find('.marca_select').attr('id');
// find the target (id of the object)
var target=$(event.target).attr('id');
$.ajax({
type: "POST",
url: "http://"+location.host+"/feature/"+brand+"/"+model+"/"+id+"/"+target,
brand: brand,
model: model,
id: id,
target: target
});
});
Этот код работает, но он повторяет событие, изменяющееся такое же количество раз, как и классы с таким именем.
Что я хочу сделать, так это чтобы функция запускала только один раз каждый раз, когда на класс требуется событие изменения.
Я не знаю, возможно ли это со структурой класса, которая у меня есть, или мне нужно связать идентификатор или класс с разными именами для каждой области с функцией.