Question

每次用户创建新的类别字段时，都会创建该字段的新ID

category_advert

#userj_requiredskills_attributes_0_category_advert_id
#userj_requiredskills_attributes_1_category_advert_id
#userj_requiredskills_attributes_2_category_advert_id

category_advertskill

#userj_requiredskills_attributes_0_category_advertskill_id
#userj_requiredskills_attributes_1_category_advertskill_id
#userj_requiredskills_attributes_2_category_advertskill_id

有人可以建议我如何有效地编写我的JQuery代码，所以没有重要的是代码的作用是什么 - 非常感谢

html.erb

<%= f.collection_select :category_advert_id, CategoryAdvert.order(:name), :id, :name, {},  {class: 'category_advert'}  %>
  <%= f.grouped_collection_select :category_advertskill_id, CategoryAdvert.order(:name), :category_advertskills, :name, :id, :name, {prompt: "Select a category"}, {class: "category_advertskill"} %>

Jquery的

$(document).ready(function () {
  var category_advertskills;
  category_advertskills = $('#userj_requiredskills_attributes_0_category_advertskill_id').html();
  return $('#userj_requiredskills_attributes_0_category_advert_id').change(function() {
    var category_advert, escaped_category_advert, options;
    category_advert = $('#userj_requiredskills_attributes_0_category_advert_id :selected').text();
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $('#userj_requiredskills_attributes_0_category_advertskill_id').html(options);
      return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().show();
    } else {
      $('#userj_requiredskills_attributes_0_category_advertskill_id').empty();
      return $('#userj_requiredskills_attributes_0_category_advertskill_id').parent().hide();
    }
  });
});


$(document).ready(function () {
  var category_advertskills;
  category_advertskills = $('#userj_requiredskills_attributes_1_category_advertskill_id').html();
  return $('#userj_requiredskills_attributes_01category_advert_id').change(function() {
    var category_advert, escaped_category_advert, options;
    category_advert = $('#userj_requiredskills_attributes_1_category_advert_id :selected').text();
    escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    options = $(category_advertskills).filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $('#userj_requiredskills_attributes_1_category_advertskill_id').html(options);
      return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().show();
    } else {
      $('#userj_requiredskills_attributes_1_category_advertskill_id').empty();
      return $('#userj_requiredskills_attributes_1_category_advertskill_id').parent().hide();
    }
  });
});

Answer 1

首先使用变量来保存那些重复的英里长选择器，而不是一遍又一遍地执行相同的选择器。 $(this)事件中的change也将与您引用的元素相同。然后，您可以使用starts-with选择器进行匹配。

e.g。类似的东西：

$(document).ready(function () {
  var category_advertskills = $('[id^="userj_requiredskills_attributes_"]');
  category_advertskills.change(function() {
    var $this = $(this);
    var category_advert = $this.find(':selected').text();
    var escaped_category_advert = category_advert.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
    var options = category_advertskills.filter("optgroup[label='" + escaped_category_advert + "']").html();
    if (options) {
      $this.html(options);
      $this.parent().show();
    } else {
      $this.empty();
      $this.parent().hide();
    }
  });
});

您似乎也有一些不会在DOM就绪处理程序中使用的不需要的返回。

Answer 2

对所有类别使用类，并使用类型和ID的数据属性

 <div class="requiredskill" data-user="userj" data-type="advertskill">blah</div>

然后从jquery中查找该类的元素并检查数据属性。

$(".requiredskill")[0].data("user"); //userj

您可以在选择器中匹配特定数据值，如下所示：

$(".requiredskill[data-user=userj][data-type=advertskill]")

动态过滤器 - 有效编码JQuery

2 个答案: