Question

我有这段代码：

<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中的列表项。选中/取消选中它们会隐藏/显示相应的列表项。另一件事是列表项是可编辑的。在我的代码中，它们甚至可以拖动。当我点击保存时，列表项被连接并保存在变量中以及在其中进行的更改。

唯一缺少的是当我隐藏一个列表项（即取消选中它）时，它会在变量中连接起来。

例如：如果我取消选中所有项目，则该变量应为空。但是在这里，即使所有都被隐藏，变量也包含所有值。

我不知道该怎么做。谁能帮我。谢谢

Answer 1

您没有检查action()中的元素是否可见。尝试类似：

function action() {
    var a = '';

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

    alert(a);
}

（我冒昧地简化了一些周围的代码。）

您现在也可以摆脱data-value属性，我们不再使用它们了。

Answer 2

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

更新小提琴：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

Answer 3

您可以使用此$('li:visible')之类的选择器，并且只会选择可见的LI

PS：元素ID应该始终是唯一的$("#numeric li")这可能会在某些浏览器中导致很多问题，如果您想要对多个元素进行分组，请使用class not id并选择它们$(".numeric li:visible")

将ul的值转换为未隐藏的变量

3 个答案: