Question

我使用Ruby on Rails并且我试图通过使用动态生成的div来隐藏/显示动态生成的项目集合中的个人id插入data attribute。这是我到目前为止所提出的，我认为我走在正确的轨道上，但无法弄清楚我错过了什么。没有if statement它可以工作，但显示每个项目的隐藏div而不是特定的项目，并且使用if语句，没有任何反应。

链接和隐藏的div

<span class="options" data-ovly=<%= activity.targetable.id %>>
    <i class="fa fa-ellipsis-h"></i>
</span>

<div class="ed_ovly none" data-ovly=<%= activity.targetable.id %>>
    <span class="shu_e">
        <%= link_to "Edit", edit_medium_path(activity.targetable), :title => "Edit", :alt => "Edit", class: '' %>
    </span>
    <span class="shu_d">
        <%= render :partial => "activities/delete", :locals => {:activity => activity} %>
    </span>
</div>

jquery的

$('.options').click(function(){
    var $ovly = $(this).attr("data-ovly");

    if ($('.ed_ovly').data("ovly") === $ovly) {
        $('.ed_ovly').toggleClass("none");
    }
});

Answer 1

TL; DR

在id代码中使用data-ovly属性而不是div，并避免脚本中的if语句：

<强> HTML

<span class="options" data-ovly=<%= activity.targetable.id %>>
  <i class="fa fa-ellipsis-h"></i>
</span>

<div class="ed_ovly none" id="<%= activity.targetable.id %>">
  <span class="shu_e">
    <%= link_to "Edit", edit_medium_path(activity.targetable), :title => "Edit", :alt => "Edit", class: '' %>
  </span>
  <span class="shu_d">
    <%= render :partial => "activities/delete", :locals => {:activity => activity} %>
  </span>
</div>

<强>脚本

$('.options').click(function() {
  var $ovly = $(this).data("ovly");
  $('#' + $ovly).toggleClass("none");
});

检查此代码段：

$(document).ready(function() {
  $('.options').click(function() {
    var $ovly = $(this).data("ovly");
    $('#' + $ovly).toggleClass("none");
  });
});

.none {
  display: none;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="options" data-ovly="1">
    ovly#1 <i class="fa fa-ellipsis-h"></i>
</span>
<br><br>
<span class="options" data-ovly="2">
    ovly#2 <i class="fa fa-ellipsis-h"></i>
</span>

<div class="ed_ovly none" id="1">
  <span class="shu_e">
    <a title="Edit ovly # 1" alt="Edit" href="#">Edit</a>
  </span>
  <span class="shu_d">
    "Your rendered partial for ovly # 1"
  </span>
</div>

<div class="ed_ovly none" id="2">
  <span class="shu_e">
    <a title="Edit ovly # 2" alt="Edit" href="#">Edit</a>
  </span>
  <span class="shu_d">
    "Your rendered partial for ovly # 2"
  </span>
</div>

解释

第一个问题出在您的if声明中：您正在使用===来比较您的值，但是，因为您使用不同的方法获取这些值（attr和{{1 }}，你得到不同的数据类型。

仔细查看您的代码（我添加了几条评论）：

data

因此，您的$('.options').click(function(){ var $ovly = $(this).attr("data-ovly"); // Returns a string: "1" if ($('.ed_ovly').data("ovly") === $ovly) // Returns a number: 1 { $('.ed_ovly').toggleClass("none"); } });每次都会返回if（因为您要将false与string进行比较）。要解决这个问题，只需使用相同的方法¹来获取两行中的数据，如下所示：

number

现在您获得了相同的数据类型，您的$('.options').click(function(){ var $ovly = $(this).data("ovly"); // Returns a number: 1 if ($('.ed_ovly').data("ovly") === $ovly) // Returns a number: 1 { $('.ed_ovly').toggleClass("none"); } });语句将按预期工作。但是你还没有走出困境，你的代码还有另一个问题，看看你如何识别每个唯一 if：

<div>

您正在使用if ($('.ed_ovly').data("ovly") === $ovly) { $('.ed_ovly').toggleClass("none"); }，即您正在使用该类，并且所有$('.ed_ovly')都拥有该类，因此使用

div

您将始终获取带有$('.ed_ovly').data("ovly")类的第一个div的值;并在

ed_ovly

您将$('.ed_ovly').toggleClass("none")应用于{strong>所有 toggleClasss("none") div类（因此，您将隐藏/显示所有ed_ovly s每次）。

因此，您希望一次只定位一个div，最好的方法是为每个div分配一个id（也是动态的），就像这样：

div

在您的脚本上，请仅使用<div class="ed_ovly none" data-ovly="<%= activity.targetable.id %>" id="<%= activity.targetable.id %">  </div>来参考您要展示/隐藏的div，并且可以通过将id更改为$('.ed_ovly')来完成。现在你的脚本应该是这样的：

$('#' + $ovly)

你的脚本现在应该工作正常，但有些事情是关闭的：随着我们所做的更改，现在根本不需要if ($('#' + $ovly).data("ovly") === $ovly) { $('#' + $ovly).toggleClass("none"); }！由于我们现在为每个div获得一个唯一的if，因此可以安全删除它：

id

而且，在我们处理它的同时，让我们摆脱$('.options').click(function() { var $ovly = $(this).data("ovly"); $('#' + $ovly).toggleClass("none"); });中不必要的data标记（我假设您不需要其他任何标记）：

div

注意

¹你仍然可以通过将它们与<div class="ed_ovly none" id="<%= activity.targetable.id %">  </div>进行比较来使用这两种方法，但我更喜欢坚持使用==。查看this question了解详情。

Rails jquery按动态值选择

1 个答案:

TL; DR

解释