Question

我试图在rails应用程序的ruby中循环遍历许多元素，以便可以显示或隐藏div，具体取决于在下拉列表中选择的元素（或单选按钮或其他）。

我的javascript / coffescript知识很差，但经过几天的黑客攻击，我有一个可行的解决方案，虽然它构造得非常糟糕。

$(document).on "turbolinks:load", ->
  if $('select[id="open_closed[1]"]').val() == "0" or $('select[id="open_closed[1]"]').val() == "1"
    $('#open_close_times_1').hide()
  $('select[id="open_closed[1]"]').click ->
    if $('select[id="open_closed[1]"]').val() == "0"
      $('#open_close_times_1').hide()
    if $('select[id="open_closed[1]"]').val() == "1"
      $('#open_close_times_1').hide()
    if $('select[id="open_closed[1]"]').val() == "2"
      $('#open_close_times_1').show()

  if $('select[id="open_closed[2]"]').val() == "0" or $('select[id="open_closed[2]"]').val() == "1"
    $('#open_close_times_2').hide()
  $('select[id="open_closed[2]"]').click ->
    if $('select[id="open_closed[2]"]').val() == "0"
      $('#open_close_times_2').hide()
    if $('select[id="open_closed[2]"]').val() == "1"
      $('#open_close_times_2').hide()
    if $('select[id="open_closed[2]"]').val() == "2"
      $('#open_close_times_2').show()
.
.
.
return

这是为了设置商店的星期几的开放时间，因此以下代码段扩展到open_closed [7]。我确定这应该用循环完成，而不是写出每个循环。我也有一个假期＆＃34;这个版本将有一个任意的天数 - 所以这个解决方案完全落在那里，但循环是完美的。

我一直试图将其提取到某种循环中以达到相同的效果（因此我可以在此处执行此操作，其他代码最多可达到任意最大值），但我可以＆＃39;找到允许我这样做的教程或说明。这是我对此进行攻击的第4天，所以任何指针都会感激不尽，我需要做些什么才能将其重构为合理的解决方案？

Answer 1

在jQuery中，使用不太具体的选择器获取您要定位的选择项的数组。例如，您可以使用带选择器的启动。然后遍历结果以隐藏元素并添加on click事件。

$(document).on("turbolinks:load", function () {
  var options = $("select[id^='open_closed']");
  $.each(options, function(index, item){
    if ($(item).val() == 0 || $(item).val() == 1) {
      $(item).hide();
    }

    $(item).on("click", function() {
      var open_close_selector = "#open_close_times_" + (index + 1);
      if ($(item).val() == "0" || $(item).val() == "1"){
        $(open_close_selector).hide();
      } else {  
        if ($(item).val() == "2") {
          $(open_close_selector).show();
        }
      }
    });
  });
});

这可以稍微清理一下，但它应该给你一个起点。

Answer 2

好的 - 所以经过一些改造并受到margo的回答，这对我有用：

$(document).on 'turbolinks:load', ->
  options = $('select[id^=\'open_closed\']')
  $.each options, (index, item) ->
    open_close_selector = '#open_close_times_' + index
    if $(item).val() == '0' or $(item).val() == '1'
      $(open_close_selector).hide()
    $(item).click ->
      if $(item).val() == '0' or $(item).val() == '1'
        $(open_close_selector).hide()
      else
        if $(item).val() == '2'
          $(open_close_selector).show()
      return
    return
  return

如何遍历多个元素并在每个元素上附加点击功能？

2 个答案: