2012-01-29 133 views
0

我遇到了一些與我的代碼有關的問題,也許你可以幫忙嗎?將ID傳遞給選擇器 - jquery

的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/ < - 可以在這裏查看

+1

你的HTML是無效的,你不能有相同的ID兩個(或更多)的元素。嘗試定義和使用數據屬性(即數據目標ID) – dievardump 2012-01-29 19:00:08

+0

@DieVarDump我已經排序,現在 – Sean 2012-01-29 19:22:37

回答

3
  1. 元素的ID必須是唯一的 - 你有兩個first_name元素和兩個last_name元素。這會導致問題。 (你也有兩個標籤「爲」 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")

+0

我怎麼能使選擇器動態呢?我已經重做了HTML,就像你建議我的JS好嗎? 。'\t $( 「val_error」)對話框({ \t \t的AutoOpen:假的, \t \t顯示: 「盲」, \t \t隱藏: 「爆炸」 \t}); 。 \t $( 「val_open 」)點擊(函數(事件){ \t \t VAR的目標= $(本).attr(「 ID」); \t \t $( '#' +目標).dialog(」開'); \t \t返回FALSE; \t});' – Sean 2012-01-29 19:16:10

+0

由於錯誤div的ID是基本目標的ID +‘_ERR’你** **可能只是硬編碼的,但它可能會是更好的()。$(this).siblings(「。val_error」)。dialog('open'); return false;});''(未測試) – 2012-01-29 19:31:22

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)