选择 phone_number 属性 On Button Click答案

【问题标题】：Pick phone_number attribute On Button Click选择 phone_number 属性 On Button Click
【发布时间】：2020-06-13 13:02:22
【问题描述】：

我有一个如下所示的索引文件，它是从数据库中挑选信息并显示一个列表。

我希望能够选择用户单击“联系”按钮时的电话号码，以便向该电话号码发送短信。

<div class="flex flex-col min-h-screen bg-white">
  <div class="max-w-4xl flex items-center h-auto lg:h-screen flex-wrap mx-auto my-32 lg:my-0">
    <% @providers.each do |provider| %>
      <!--Main Col-->
      <div id="profile" class="w-full lg:w-3/5 rounded-lg lg:rounded-l-lg lg:rounded-r-none shadow-2xl bg-white opacity-75 mx-6 lg:mx-0">
        <div class="p-4 md:p-12 text-center lg:text-left">
          <!-- Image for mobile view-->
          <div class="block lg:hidden rounded-full shadow-xl mx-auto -mt-16 h-48 w-48 bg-cover bg-center" style="background-image: url('https://source.unsplash.com/MP0IUfwrn0A')"></div>
          <%= image_tag provider.avatar.variant(resize_to_limit: [150, nil]), class: "w-100 h-100 rounded-full" %>
          <h1 class="text-3xl font-bold pt-8 lg:pt-0"><%= provider.full_name %></h1>
          <div class="mx-auto lg:mx-0 w-4/5 pt-3 border-b-2 border-teal-500 opacity-25"></div>
          <p class="invisible">
            <p>Services:</p>
            <% provider.service.each do |s| %>
              <p class="pt-4 text-base font-bold flex items-center justify-center lg:justify-start">
                <%= s %>
              </p>
            <% end %>
          </p>
          <p class="pt-2 text-gray-600 text-xs lg:text-sm flex items-center justify-center lg:justify-start">

            <%= provider.zip_code %></p>
          <p class="pt-8 text-sm"><%= provider.brief_description %></p>
          <!-- <p><%= provider.phone_number %></p> -->
          <div class="pt-12 pb-8">
            <%= button_tag "Contact", class: "bg-teal-700 hover:bg-teal-900 text-white font-bold py-2 px-4 rounded-full"%>
          </div>
        </div>
      </div>
    <% end %>
    <!-- Pin to top right corner -->
  </div>
</div>

这是上面代码的结果：

我已经用下面的代码对 JS 进行了试验，但我只选择了其中一项的 phone_number，当我单击提交按钮时，它会出现在其余所有项目中。

<%= javascript_tag do %>
   <% @providers.each do |p|%>
      window.providerPhone = '<%= j p.phone_number %>';
    <% end %>
 <% end %>
  <div class="pt-12 pb-8">
    <%= button_tag "Contact", class: "bg-teal-700 hover:bg-teal-900 text-white font-bold py-2 px-4 rounded-full", :onclick => "alert(providerPhone)" %> 
  </div>

我认为我必须使用 JS，但我不确定如何去做。我遇到了this，但这并没有帮助。我该如何解决这个问题。谢谢。

【问题讨论】：

标签： javascript ruby-on-rails-6

【解决方案1】：

您是否尝试过像这样使用each_with_index：

<%= javascript_tag do %>
   <% @providers.each_with_index do |p, index|%>
      window.providerPhone = '<%= j p[index].phone_number %>';
    <% end %>
 <% end %>
  <div class="pt-12 pb-8">
    <%= button_tag "Contact", class: "bg-teal-700 hover:bg-teal-900 text-white font-bold py-2 px-4 rounded-full", :onclick => "alert(providerPhone)" %> 
  </div>

【讨论】：

感谢您的回复！使用此实现，我收到一个错误 undefined method phone_number' for nil:NilClass` 但是，我采用了另一种对我有用的方法。

【解决方案2】：

我所做的是像这样在按钮周围包裹一个<a> tag；

<div class="pt-12 pb-8">
  <a href="<%= providers_notify_path(provider_phone: provider.phone_number, provider_serv: provider.service)%>">
     <%= button_tag "Contact", class: "bg-teal-700 hover:bg-teal-900 text-white font-bold py-2 px-4 rounded-full"%>
   </a>
</div>

我刚刚在<a> tag 中添加了一条路径，并带有href。我使用的路径是：providers_notify_path。然后我在路径中的另一个控制器中传递了我想要访问的值。在这种情况下，我从provider.phone_number 中选择了provider_phone。

所以，要在控制器中使用 provider_phone 值，我这样做了：

@provider_phone = params[:provider_phone]

然后我可以在我想要的操作中使用实例变量@provider_phone，特别是create 操作。

【讨论】：