HTML div 标签中的循环表达式与 Javascript 一起使用

Question

我正在 rails 项目上做一个 Ruby，我试图在 html 形式中循环变量，这样我就不需要手动编写那么多代码.但是，我意识到如果我将要计算的表达式放在 id 标签中，JS 代码将无法工作。例如， <div class="field" id="barcode_type1"> 有效，但是 <div class="field" id="barcode_type#{i}"> 其中 i 从 1 到 10 不起作用。

我猜测在 html 中计算表达式不会在 Javascript 端调用，我还怀疑 turbolinks 可能不会等待 id 标记被计算。所以我怀疑我不能在 id 标签中使用表达式，或者我需要更改 turbolinks。

在我的 html.erb

<% for i in 1..10 %> 
   <div class="field" id="type#{i}">
      <%= f.label "type#{i}" %>
      <%= f.select "type#{i}" ,['text','barcode']%>
    </div> 
    <div class="field" id="barcode_type#{i}">
      <%= f.label "barcode_type#{i}" %>
      <%= f.text_field "barcode_type#{i}" %>
    </div> 
  </div>

在我的 .js 文件中

$(document).on('turbolinks:load', function(){


if ($('#type1').find('option:selected').val() != "barcode")
  {
   $('#barcode_type1').hide();
   $("#barcode_type1").attr('disabled','disabled');
  }
  else
  {
     $("#barcode_type1").removeAttr('disabled');
     $('#barcode_type1').show();
  }

$('#type1').on('change', function(){
  if ($('#type1').find('option:selected').val() != "barcode")
  {
   $('#barcode_type1').hide();
   $("#barcode_type1").attr('disabled','disabled');
  }
  else
  {
     $("#barcode_type1").removeAttr('disabled');
     $('#barcode_type1').show();
  }
}) ...

.....

Answer 1

尝试改变这个：

<div class="field" id="type#{i}">

对此：

<div class="field" id="type<%= i %>">

因为 <div class="field" id="type#{i}"> 是一个普通的 HTML 代码，RoR 不会在此处更改任何内容，并且您的 HTML 页面看起来与您编写的完全相同。

HTML div 标签中的循环表达式与 Javascript 一起使用

Looping expression in HTML div tag to work with Javascript

html

javascript

jquery

ruby-on-rails

turbolinks