Rails jquery select by dynamic value

Question

我正在使用Ruby on Rails，我正在尝试通过使用动态生成的id来隐藏/显示动态生成的项目集合中的单个div，然后将其插入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;博士

在div标签中使用id属性而不是data-ovly，并避免在脚本中使用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和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")

您将始终获得具有类ed_ovly的第一个div的值;并且在

$('.ed_ovly').toggleClass("none")

您将toggleClasss("none")应用于ed_ovly类的所有div(因此，您每次都会隐藏/显示所有div)。

因此，您一次只想定位一个div，最好的方法是为每个div分配一个id(也是动态的)，如下所示：

<div class="ed_ovly none" data-ovly="<%= activity.targetable.id %>" id="<%= activity.targetable.id %">
<!-- Your div code... -->
</div>

在您的脚本上，仅引用要使用其id显示/隐藏的div，这可以通过将$('.ed_ovly')更改为$('#' + $ovly)来完成。现在你的脚本应该看起来像这样：

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

您的脚本现在应该可以正常工作，但有些不对劲：通过我们所做的更改，现在根本不需要if！由于我们现在为每个div获得了一个唯一的id，因此可以安全地删除它：

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

而且，当我们这样做时，让我们也摆脱div中不必要的data标签(我假设您不需要它进行其他任何事情)：

<div class="ed_ovly none"  id="<%= activity.targetable.id %">
<!-- Your div code... -->
</div>

注意

¹您仍然可以通过将它们与==进行比较来使用这两种方法，但我更喜欢坚持使用===。有关详细信息，请查看此问题。