Запись свойств картинок в строку
Нужна помощь с передачей свойств картинок php скрипту...
Есть несколько картинок <div id="img1" class="image"><img src="image1.png" /></div> <div id="img2" class="image"><img src="image2.png" /></div> <div id="img3" class="image"><img src="image3.png" /></div> <div id="img4" class="image"><img src="image4.png" /></div> <div id="img5" class="image"><img src="image5.png" /></div> <a id="submit"><span></span></a> <form id="jsonform" action="merge.php" method="POST"> <input id="jsondata" name="jsondata" value="" autocomplete="off"> </form> Их количество заранее не известно... И код:
$('#submit').bind('click',function(){
/*Тут нужен код перебора свойств css
типа 'id' : objid,
'src' : objsrc,
'width' : objwidth,
'height' : objheight,
'top' : objtop,
'left' : objleft,
*/
var dataString = JSON.stringify(data);
$('#jsondata').val(dataString);
});
});
В конечном итоге должны получится строки для каждого дива примерно такие {"id":"img1","src":"images/image1.png","width":"940px","height":"1388px"}{"id ":"img2","src":"images/image2.png","width":"90px","height":"188px"} и т.д. они запишутся в input и отправятся на другую страничку... |
Torch`Ok,
и в чём проблема? |
Проблема в js... Нужно чтоб он считал количество дивов с классом "image" и для каждого писал такую строку {"id":"img1","src":"images/image1.png","width":"940px","height":"1388px"}. Я не знаю как это реализовать
|
Torch`Ok,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#submit').bind('click',function(e){
e.preventDefault();
var dataString = '';
var divs = $('div.image');
divs.each(function (index, self) {
var img = $(self).children('img') ;
var css = img.css(['width', 'height','top','left'])
var id = $(self).attr("id");
var src = img.attr("src");
var data = {
'id' : id,
'src' : src,
'width' : css['width'],
'height' : css['height'],
'top' : css['top'],
'left' : css['left']
}
dataString += JSON.stringify(data);
});
alert(dataString); //для теста
$('#jsondata').val(dataString);
});
});
</script>
</head>
<body>
<div id="img1" class="image"><img src="image1.png" /></div>
<div id="img2" class="image"><img src="image2.png" /></div>
<div id="img3" class="image"><img src="image3.png" /></div>
<div id="img4" class="image"><img src="image4.png" /></div>
<div id="img5" class="image"><img src="image5.png" /></div>
<a id="submit"><span>click</span></a>
<form id="jsonform" action="merge.php" method="POST">
<input id="jsondata" name="jsondata" value="" autocomplete="off">
</form>
</body>
</html>
|
Спасибо... Оч выручил..
|
А как добавить еще и для дивов с текстом???
<div id="img1" class="image"><img src="image1.png" /></div> <div id="img2" class="image"><img src="image2.png" /></div> <div id="img3" class="image"><img src="image3.png" /></div> <div id="img4" class="image"><img src="image4.png" /></div> <div id="img5" class="image"><img src="image5.png" /></div> <div id="text1" class="text">text</div> <div id="text2" class="text">text</div> <div id="text3" class="text">text</div> <div id="text4" class="text">text</div> <div id="text5" class="text">text</div>
<script>
$(document).ready(function() {
$('#submit').bind('click',function(e){
e.preventDefault();
var divs = $('div.image');
divs.each(function (index, self) {
var img = $(self).children('img') ;
var css = img.css(['width', 'height','top','left'])
var id = $(self).attr("id");
var src = img.attr("src");
var data = {
'id' : id,
'src' : src,
'width' : css['width'],
'height' : css['height'],
'top' : css['top'],
'left' : css['left']
}
});
var divstxt = $('div.text');
divstxt.each(function (index, self) {
var css = $(self).css(['width', 'height','top','left'])
var text = $(self).html();
var newdata = {
'width' : css['width'],
'height' : css['height'],
'top' : css['top'],
'left' : css['left'],
'text' : text
};
});
var data += newdata ;
var dataString = JSON.stringify(data);
$('#jsondata').val(dataString);
$('#jsonform').submit();
});
});
</script>
Как правильно это совместить????? хелп |
Torch`Ok,
$(document).ready(function() {
$('#submit').bind('click',function(e){
e.preventDefault();
var dataString = '';
var divs = $('div.image');
var data;
divs.each(function (index, self) {
var img = $(self).children('img') ;
var css = img.css(['width', 'height','top','left'])
var id = $(self).attr("id");
var src = img.attr("src");
data = {
'id' : id,
'src' : src,
'width' : css['width'],
'height' : css['height'],
'top' : css['top'],
'left' : css['left']
}
data = JSON.stringify(data); ;
dataString += data
});
var divstxt = $('div.text');
divstxt.each(function (index, self) {
var css = $(self).css(['width', 'height','top','left'])
var text = $(self).html();
data = {
'width' : css['width'],
'height' : css['height'],
'top' : css['top'],
'left' : css['left'],
'text' : text
};
data = JSON.stringify(data); ;
dataString += data
});
$('#jsondata').val(dataString);
$('#jsonform').submit();
});
});
|
Все получилось... Спасибо
|
| Часовой пояс GMT +3, время: 04:48. |