1

我正在设计一个多动态选择菜单，即我有一个品牌菜单，在用户选择品牌后，使用 javascript 和 AJAX，我将搜索该品牌的可用模型并将它们添加到第二个选择菜单中。此过程再次重复，但这次显示所选模型的特征。

为此，由于我有许多不同的区域需要相同的系统，所以我在每个品牌选择菜单中使用一个具有相同名称的类，在每个模型选择菜单中使用另一个类。

  <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
        });
});

此代码有效，但它重复事件更改的次数与具有该名称的类相同。

我想要做的是每次为类调用更改事件时，该函数只运行一次。

我不知道这对于我拥有的类结构是否可行，或者我是否必须将每个区域的 id 或具有不同名称的类与函数相关联。

4

2 回答 2

2

我不明白为什么该事件应该触发两次，因为您对 $(selector).change 所做的所有事情都是说，每次更改事件都会触发您想要处理它的选择器。我什至进行了快速测试以确保它不会多次触发。

你能更好地解释一下症状实际上是什么吗？如，实际上发生了两次？您的事件处理程序中的所有内容都会发生两次吗？

我在想你对父母执行的操作的选择器可能有点过于宽松（$（event.target）.parent（）.parent（））所以如果你只想在你的事件所在的容器上做一些事情被解雇这不是最好的方式（但话说回来，我不知道你的最终目的是什么）。

于 2013-11-06T23:33:36.867 回答
0

为了您的帮助，我发现问题与 Javascript 无关，而是在 Ruby on Rails 上。

我正在添加application.html.erb其他 js 文件，如果你有它//= require_tree，application.js它会添加树中的每个 js 文件，因此添加 js 文件application.html.erb会使它们重复并导致像这样的奇怪行为。

于 2013-11-07T11:33:01.643 回答