[英]How to save img src and span text from child div if checkbox is checked with javascript?
How do I save IMG src and span text from a child div using Javascript? 如何使用Javascript保存IMG src并从子div跨文本? The data should be saved in two global variabels. 数据应保存在两个全局变量中。
Look at my html/javascript code here http://jsfiddle.net/8LW6Q/7/ 在这里查看我的html / javascript代码http://jsfiddle.net/8LW6Q/7/
<div class="parentBox">
<img id="img_1" src="pic1.png" alt="Small pic" class="notChecked">
<div class="childBox">
<img src="pic1.png" alt="Bigger pic">
<input type="checkbox" data-img="img_1" onclick="javascript:funCalled(this)"/><span>Sample picture</span>
</div>
</div>
<div class="parentBox">
<img id="img_2" src="pic2.png" alt="Small pic" class="notChecked">
<div class="childBox">
<img src="pic2.png" alt="Bigger pic">
<input type="checkbox" data-img="img_2" onclick="javascript:funCalled(this)"/><span>Sample picture</span>
</div>
</div>
The IMG src in and span tag in childBox should be saved in the global variable imgSrc and imgSpan if the checkbox is checked. 如果选中了复选框,则childBox中的IMG src in和span标签应保存在全局变量imgSrc和imgSpan中。
I guess I need a for loop to collect the information from the childBoxes but I have no idea how to get in every childBox to collect it (if it checked). 我想我需要一个for循环来从childBox收集信息,但是我不知道如何进入每个childBox来收集它(如果选中)。 No Jquery. 没有Jquery。
The function funCalled can be untouched. 函数funCalled可以保持不变。 I want a new function that actives when I push a button. 我想要一个新功能,当我按下按钮时会激活。
<input type="button" value="show selected pics" onclick="function"/>
Look at the Jfiddle for html and javascript code. 在Jfiddle中查看html和javascript代码。
Hope someone can help me. 希望可以有人帮帮我。
I think I have what you are looking for, but not sure how you wanted the data stored in the arrays, so you might have to change that up a bit. 我想我有您要寻找的东西,但是不确定您要如何将数据存储在数组中,因此您可能需要稍作修改。
JS JS
function funCalled(obj) {
var el = document.getElementById(obj.getAttribute('data-img'));
if (obj.checked) {
imgSrc.push({
id: el.id,
src: el.src
});
imgSpan.push({
id: el.id,
text: document.querySelector('[data-img="' + el.id + '"] + span').innerHTML
});
el.className = "checked";
} else {
imgSrc = imgSrc.filter(function (val) {
return val.id !== el.id;
});
imgSpan = imgSpan.filter(function (val) {
return val.id !== el.id;
});
el.className = "notChecked";
}
}
Updated JSFiddle: http://jsfiddle.net/wyze/8LW6Q/11/ 更新的JSFiddle: http : //jsfiddle.net/wyze/8LW6Q/11/
OK, try this DEMO : OK,试试这个DEMO :
var imgObj = {};
function funCalled(obj) {
var el = document.getElementById(obj.getAttribute('data-img'));
if (obj.checked) {
el.className = "checked";
} else {
el.className = "notChecked";
}
}
function addMe(obj){
var el = document.getElementById(obj.getAttribute('data-img'));
imgObj[el.id]= imgObj[el.id] || {};
imgObj[el.id].imgSrc = imgObj[el.id].imgSrc || [];
imgObj[el.id].imgSpan = imgObj[el.id].imgSpan || [];
var parent = el.parentNode.getElementsByClassName('childBox')[0],
imgSRC = parent.getElementsByTagName('img')[0].src,
spanTXT = parent.getElementsByTagName('span')[0].innerHTML;
if (obj.checked) {
imgObj[el.id].imgSrc.push(imgSRC);
imgObj[el.id].imgSpan.push(spanTXT);
} else {
var imgIx = imgObj[el.id].imgSrc.indexOf(imgSRC),
spanIx = imgObj[el.id].imgSpan.indexOf(spanTXT);
imgObj[el.id].imgSrc.splice(imgIx);
imgObj[el.id].imgSpan.splice(spanIx);
}
console.log(imgObj, imgObj[el.id].imgSrc, imgObj[el.id].imgSpan);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.