function hideDatePicker(input) { // 获取单元格中的按钮元素 var button = input.nextSibling; // 隐藏input元素 input.style.display = "none"; // 显示按钮 button.style.display = "block"; // 将单元格的值替换为选择的日期 input.parentNode.textContent = input.value; }
时间: 2023-06-20 15:04:36 浏览: 103
这是一个 JavaScript 函数,用于隐藏日期选择器并将选择的日期显示在单元格中。
函数接受一个 input 参数,代表日期选择器的输入框元素。首先,获取该元素后面的按钮元素,然后将输入框元素隐藏,按钮元素显示。最后,将单元格的值替换为选择的日期。
需要注意的是,这个函数假设该输入框元素的父元素是单元格元素,因为最后将单元格的值替换为选择的日期。如果父元素不是单元格元素,可能会出现错误。
相关问题
function hideDatePicker(input) { // 获取单元格中的按钮元素 var button = input.nextSibling; // 隐藏input元素 input.style.display = "none"; // 显示按钮 button.style.display = "block"; // 将单元格的值替换为选择的日期 input.parentNode.innerHTML = input.value; } 这段代码执行后,日期选择器隐藏了,但是日期没有替换到单元格里
这是因为在替换单元格的innerHTML时,只替换了input元素所在的单元格,而按钮元素所在的单元格并没有被替换。需要将按钮元素的父节点也替换掉,代码如下:
```
function hideDatePicker(input) {
// 获取单元格中的按钮元素
var button = input.nextSibling;
// 隐藏input元素
input.style.display = "none";
// 显示按钮
button.style.display = "block";
// 将单元格的值替换为选择的日期
var cell = input.parentNode;
cell.innerHTML = input.value;
cell.appendChild(button);
}
```
这样就可以将按钮元素也替换掉,从而实现日期的替换。
// 获取需要点击展开隐藏的元素var center = document.querySelector('.center');var img = document.querySelector('.jian');// 添加点击事件img.addEventListener('click', function() { // 判断当前是否已经展开 if (center.style.display === 'none') { // 如果已经隐藏,则展开 center.style.display = 'block'; img.src = 'images/s-上箭头.png'; // 修改箭头方向 } else { // 如果已经展开,则隐藏 center.style.display = 'none'; img.src = 'images/s-下箭头%20(1).png'; // 修改箭头方向 }});我想对所有的类都添加这个效果
可以使用 `querySelectorAll` 方法获取所有需要点击展开隐藏的元素,然后遍历添加点击事件。例如:
```javascript
// 获取所有需要点击展开隐藏的元素
var centers = document.querySelectorAll('.center');
var imgs = document.querySelectorAll('.jian');
// 遍历添加点击事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', function() {
// 获取当前被点击的元素对应的内容元素
var center = this.parentNode.nextSibling.nextSibling;
// 判断当前是否已经展开
if (center.style.display === 'none') {
// 如果已经隐藏,则展开
center.style.display = 'block';
this.src = 'images/s-上箭头.png'; // 修改箭头方向
} else {
// 如果已经展开,则隐藏
center.style.display = 'none';
this.src = 'images/s-下箭头%20(1).png'; // 修改箭头方向
}
});
}
```
这样就可以对所有需要点击展开隐藏的元素添加效果了。其中,`querySelectorAll` 方法返回的是一个类数组对象,需要使用 `for` 循环遍历每个元素。在点击事件中,需要获取当前被点击元素的父元素的下一个兄弟元素(也就是需要展开隐藏的内容元素)。
阅读全文