標題: [jQuery]請問如何取得迴圈中選取的文字與id [打印本頁]
作者: ironman 時間: 2010-8-15 00:36 標題: [jQuery]請問如何取得迴圈中選取的文字與id
前輩好
小弟在頁面上有數量不等的區塊，是由資料庫迴圈查詢出來的，
該如何點選到指定的區塊，
就可以將指定區塊內的<h1>內的標題及所屬id放進Dialog內，
以進行後續更新資料的表單，
目前我只可重複取到同一個標題與id
沒辦法取得作用中的標題
用$(this)又一直出錯，
可否請教正確的寫法
謝謝
這是頁面上的jQuery
<script language="javascript">
$(document).ready(function() {
//修改的Dialog容器
$("#modiDialog").dialog({
autoOpen: false,
modal: true,
buttons : {
"取消" : function() {
$(this).dialog("close");
},
"確定修改" : function() {
$(this).dialog("close");
}
} //buttons end
});
//#modiDialog end
//修改的Dialog Link
$(".button").click(function(e) {
$("#modiDialog").dialog("open");
e.preventDefault();
var targetTitle = $("h1").html();
var targetid = $("input").attr("value");
document.modiform.get_h1_name.value = targetTitle ;
document.modiform.get_box_id.value = targetid ;
}); //.button end
});
</script>
這是頁面上的HTML：
<div id="box1" class="box">
<h1>AAA</h1>
<input id="box_id" type="hidden" value="001" />
<input id="button1" class="button" type="button" value="修改" />
</div>
<div id="box2" class="box">
<h1>BBB</h1>
<input id="box_id" type="hidden" value="002" />
<input id="button2" class="button" type="button" value="修改" />
</div>
<div id="box3" class="box">
<h1>CCC</h1>
<input id="box_id" type="hidden" value="003" />
<input id="button3" class="button" type="button" value="修改" />
</div>
<div id="box4" class="box">
<h1>DDD</h1>
<input id="box_id" type="hidden" value="004" />
<input id="button4" class="button" type="button" value="修改" />
</div>
<!-- ui-dialog -->
<div id="modiDialog" title="修改">
<form id="modiform" name="modiform" action="modi.php" method="POST" class="formBox">
<label for="h1_name">標題名稱：</label>
<input id="get_h1_name" name="get_h1_name" type="text"value=""/>
<input id="get_box_id" name="get_box_id" type="text" value="" />
</form>
</div>
作者: wmh 時間: 2010-8-15 07:21
你取 h1 的內容和 box_id 應該要由 user 點選的 button 去找相關位置。
但是你目前用
$("h1").html();
是找整個網頁的，所以一定是找到第一個...
找相關的話，就由 $(this) 開始沒錯，先找 parent() 後，再找底下的 h1 或 input
var targetTitle = $(this).parent().children("h1").html();
作者: ironman 時間: 2010-8-16 16:54
本帖最後由 ironman 於 2010-8-16 16:55 編輯
謝謝版大
目前已正確的選取到指定的元素了
但發現另一個問題是當更新完成的callback資料
確無法正確放到同一個元素內
變成有相同class的全部被更新了
小弟用 $('h1').html(data); //全部一起更新了
用 $(this).parent().children("h1").html(data); //也不行,沒反應 $("#modiDialog").dialog({
buttons : {
"取消" : function() {
$(this).dialog("close");
},
"確定修改" : function() {
var form = $('#modiform');
$.post(form.attr('action'), form.serialize(), function(data) {
//$('h1').html(data);
$(this).parent().children("h1").html(data);
},''); //Ajax送出
$(this).dialog("close");
}
}, //buttons end
close: function() {
$("#get_h1_name").html("");
}
}); //#modiDialog end還請大大指教
謝謝
作者: ironman 時間: 2010-8-17 16:41
終於可以了
Demo在這
http://jquery.gogogogogogogogogo.com/modiTitle.php
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|