将 ID 传递给选择器 - Jquery

发布于 2024-12-29 09:43:42 字数 1856 浏览 1 评论 0原文

我的代码有一些问题也许你可以帮忙?

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,而不是一次使用所有 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/ <- 可以在此处查看

I'm having some issues with my code maybe you could help?

Jquery: [updated]

<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: [updated]

<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>

So basically I'm trying to get the dialog to open for just one ID at a time rather than all at once.. I've tried the following but no luck:

Jquery I thought would work

<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>

Any help / pointers or even ideas would be great!

http://jsfiddle.net/dRRRd/ <- can view here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

踏月而来 2025-01-05 09:43:42
  1. 元素 ID 必须是唯一的 - 您有两个 first_name 元素和两个 last_name 元素。这会引起问题。 (您还有两个标签“for”contact_name - 是否有两个元素也具有此 ID?)

  2. 在您的 javascript 中,当您调用时未定义 target $(".val_error"+target).dialog({ (它在另一个回调函数的范围内声明。)

您要做的是将一个类分配给每个表单组的父元素,然后使用它作为选择器来查找错误 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")

  1. Element ID's must be unique - you have two first_name elements and two last_name elements. This will cause issues. (You also have two labels "for" contact_name - are there two elements with this ID as well?)

  2. In your javascript, target is not defined when you call $(".val_error"+target).dialog({ (it's declared in the scope of another callback function.)

What you want to do is assign a class to the parent element of each form group, then use that as a selector to find your error divs. Try something like this:

<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>

And then your jQuery selector would be $(".first_name .val_error") or $(".last_name .val_error")

美羊羊 2025-01-05 09:43:42

以下行有几件事:

var target = $this.attr("id");
  1. $this 将查找名为 $this 的变量,该变量不存在。要获取上下文 jQuery 对象,请使用 $(this)
  2. 变量 target 永远不会被读取——也许您的意思是 $('#' + target)。对话框('open'); 在下一行?

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

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

..并将其替换为:

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

因为无论如何只有一个元素获得 click 事件,并且可以使用 $(this)

A couple of things with the following line:

var target = $this.attr("id");
  1. $this will look for a variable called $this, which does not exist. To get at the contextual jQuery object, use $(this)
  2. The variable target is never read -- maybe you meant $('#' + target).dialog('open'); on the next line?

But the simplest solution is probably to remove:

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

..and replace it with:

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

because only one element gets the click event anyway, and that element can be targeted with $(this).

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文