Передача идентификатора в селектор - JQuery

Question

У меня возникли проблемы с кодом, может быть, вы могли бы помочь?

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/ < - можно посмотреть здесь

Answer 1

1. Элемент ID должен быть уникальным - у вас есть два first_name элементов и два last_name элементов. Это вызовет проблемы. (У вас также есть две метки «для» contact_name - есть два элемента с этим идентификатором, а?)

2. В вашем JavaScript, target не определен при вызове $(".val_error"+target).dialog({ (он объявлен в рамках другой функции обратного вызова.)

то, что вы хотите сделать, это присвоить класс родительского элемента каждого вида группы, а затем использовать его в качестве селектора, чтобы найти дивы ошибок.Попробуйте что-то вроде этого:

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

Answer 2

пара вещей с помощью следующей строки:

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

1. $this будет искать переменную под названием $this, которая не существует. Чтобы попасть в контекстный объект jQuery, используйте $(this)
2. Переменная target никогда не читается - возможно, вы имели в виду $('#' + target).dialog('open'); на следующей строке?

Но самое простое решение, возможно, удалить:

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

..и заменить его:

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

, потому что только один элемент получает click событие так или иначе, и этот элемент может быть нацелены на $(this).