将 ID 传递给选择器 - Jquery答案

【问题标题】：Passing ID to Selector - Jquery将 ID 传递给选择器 - Jquery
【发布时间】：2012-01-29 18:51:45
【问题描述】：

我的代码有一些问题，也许你能帮忙？

Jquery：[更新]

<script>
$(function() {

     $(".val_error").dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
 });
 $(".val_open").click(function(event) {
     var target = $(this).attr("id");
     $('#' + target).dialog('open');
    return false;
 });
    });
</script>

HTML：[更新]

<p class="first_name>
<div class="val_error" id="first_name_err"><?php echo form_error('first_name'); ?></div>
<label for="contact_first_name"><?php echo $label_values->first_name;?></label>
<?php echo form_input('first_name', $form_values->first_name, 'id="first_name"');?>
<button class="val_open" id="first_name">Open</button>
</p>

<p class="last_name">
<div class="val_error" id="last_name_err"><?php echo form_error('last_name'); ?></div>
<label for="contact_last_name"><?php echo $label_values->last_name;?></label>
<?php echo form_input('last_name', $form_values->last_name, 'id="last_name"');?>
<button class="val_open" id="last_name">Open</button>
</p>

所以基本上我试图让对话框一次只打开一个 ID，而不是一次打开。我尝试了以下但没有运气：

我认为 Jquery 可以工作

<script>
$(function() {

     $(".val_error"+target).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
     });
     $(".val_open").click(function(event) {
            var target = $this.attr("id");
        $(".val_error").dialog("open");
        return false;
     });
    });
</script>

任何帮助/指针甚至想法都会很棒！

http://jsfiddle.net/dRRRd/

【问题讨论】：

您的 html 无效，您不能有两个（或更多）具有相同 id 的元素。尝试定义和使用 data- 属性（即 data-target-id ）
@DieVarDump 我已经整理好了

标签： javascript jquery variables selector

【解决方案1】：

元素 ID 必须是唯一的 - 您有两个 first_name 元素和两个 last_name 元素。这将导致问题。（您还有两个标签“for”contact_name - 是否也有两个具有此 ID 的元素？）
在您的 javascript 中，当您调用 $(".val_error"+target).dialog({ 时未定义 target（它在另一个回调函数的范围内声明。）

您要做的是为每个表单组的父元素分配一个类，然后将其用作选择器来查找错误 div。试试这样的：

<p class="first_name">
<div class="val_error" id="first_name_err"><?php echo form_error('first_name'); ?></div>
<label for="contact_name"><?php echo $label_values->first_name;?></label>
<?php echo form_input('first_name', $form_values->first_name, 'id="first_name"');?>
<button class="val_open" id="first_name">Open</button>
</p>

<p class="last_name">
<div class="val_error" id="last_name_err"><?php echo form_error('last_name'); ?></div>
<label for="contact_name"><?php echo $label_values->last_name;?></label>
<?php echo form_input('last_name', $form_values->last_name, 'id="last_name"');?>
<button class="val_open" id="last_name">Open</button>
</p>

然后您的 jQuery 选择器将是 $(".first_name .val_error") 或 $(".last_name .val_error")

【讨论】：

那我怎样才能使选择器动态化呢？我已经按照您的建议重做了 HTML，我的 JS 还好吗？ ` $(".val_error").dialog({ autoOpen: false, show: "blind", hide: "explode" }); $(".val_open").click(function(event) { var target = $(this).attr("id"); $('#' + target).dialog('open'); return false; } );`
由于错误 div 的 ID 本质上是目标的 ID + "_err"，您可以将其硬编码，但最好执行$(".val_open").click(function() {$(this).siblings(".val_error").dialog('open'); return false;}); 之类的操作（未经测试）

【解决方案2】：

以下几行：

var target = $this.attr("id");

$this 将查找名为 $this 的变量，该变量不存在。要获取上下文 jQuery 对象，请使用 $(this)
变量target 永远不会被读取——也许你的意思是$('#' + target).dialog('open'); 在下一行？

但最简单的解决方案可能是删除：

var target = $this.attr("id");
$(".val_error").dialog("open");

..并将其替换为：

$(this).dialog('open');

因为无论如何只有一个元素会获得click 事件，并且可以使用$(this) 定位该元素。

【讨论】：