获取ul的值到不隐藏的变量中

Getting values of ul into variable which are not hidden

本文关键字：隐藏 变量 ul 获取      更新时间：2023-09-26

我有这样的代码:

<div>
    john<input type="checkbox" onchange="javascript:hideshow(document.getElementById(this.value),this)" value="value1" checked="true">
    jhonny<input type="checkbox" onchange="javascript:hideshow(document.getElementById(this.value),this)" value="value2" checked="true">
    jack<input type="checkbox" onchange="javascript:hideshow(document.getElementById(this.value),this)" value="value3" checked="true">
</div>
<ul id="numeric">
    <li id="value1" data-value="info1">
        <div id="info1" contenteditable="true">john</div>
    </li>
    <li id="value2" data-value="info2">
        <div id="info2" contenteditable="true">jhonny</div>
    </li>
    <li id="value3" data-value="info3">
        <div id="info3" contenteditable="true">jack</div>
    </li>
</ul>
<input type="submit" id="send1" value="save" class="button" onclick="action()">

和这个脚本:

function hideshow(e, ev) {
    if (ev.checked) {
        e.style.display = "block";
    } else {
        e.style.display = "none";
    }
}
function action() {
    var values = $('#numeric li').map(function () {
        return $(this).attr('data-value');
    });
    $lis = $("#numeric li").length;
    var n = $lis;
    var a="";
    for ($i = 0; $i < n; $i = $i + 1) 
    {
        a = (a + (document.getElementById((values[$i])).innerHTML) +". ");
    }
    alert (a);
}

输出是:This

这里的复选框链接到UL中的列表项。选中/取消选中它们隐藏/显示各自的列表项。另一件事是列表项是可编辑的。在我的代码中，它们甚至是可拖动的。当我单击save时，列表项被连接并保存在一个变量中，以及对它们所做的更改。

唯一缺少的是当我隐藏一个列表项(即:取消选中)它不应该被连接到变量中。

示例:如果取消选中所有项，则变量应为空。但是在这里，即使所有的值都被隐藏，变量仍然包含所有的值。

我不知道该怎么做。有人能帮我吗?谢谢你

您没有检查元素是否在您的action()中可见。试试这样写:

function action() {
    var a = '';
    $('#numeric li:visible').each(function(index) {
        a += $.trim($(this).text()) + '. ';
    });
    alert(a);
}

(我也冒昧地简化了一些周围的代码)

你现在也可以去掉data-value属性，我们不再使用它们了

尝试如下…它会帮助你……

更新的小提琴:http://fiddle.jshell.net/dZ5ZC/9/

        var id = values[$i]; // Get the ID 
        var element = document.getElementById(id); // Get the Element by ID
        if (element.offsetWidth !== 0 || element.offsetHeight !== 0)  //Check the element isVisible or Not
        a = (a + (document.getElementById((values[$i])).innerHTML) +". "); // Assignt he Value to Variable

你可以像这样使用选择器$('li:visible')，只选择可见的li

PS:元素id应该始终是唯一的$("#numeric li")这可能会导致很多问题，在一些浏览器，如果你想组几个元素，使用类而不是id，并选择他们像这样$(".numeric li:visible")

相关文章：