JavaScript 元素样式随动态 id 变化答案

【问题标题】：JavaScript element style change with dynamic idJavaScript 元素样式随动态 id 变化
【发布时间】：2012-11-14 03:00:24
【问题描述】：

我正在尝试在选中它旁边的复选框时通过列表项进行一行。我已经设法做到了，但我无法检查该框是否已选中。

JS 文件

    if(document.getElementById(theID).checked){

document.getElementById(theID).setAttribute("style", "text-decoration:line-through");
}

HTML/PHP

                echo'<ol>';
            foreach($to_do_XML->task as $item)
            {
                $theID = $item['id'];

            echo '<li id="'.$theID.'">'.$item.'</li>' ;?><form ><input  onclick="return cross('<?=$theID?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/></form>
                 <?php     

            }
            echo '</ol>';

我还应该补充一点，列表项正在通过 xml 元素循环的 foreach 循环中添加

以上代码没有任何帮助，将不胜感激

【问题讨论】：

我认为你应该尝试在缩进中付出一些努力；）另外，我会避免使用“setAttribute()”，而是使用类。
对不起。如果我使用课程，我将无法单独划掉每个 li。
当然可以，但是你必须在单个输入元素上设置类，而不是容器。
为什么要生成这么多表单？
@ericG 我需要一个复选框来提交每个 li 表单，所以我不认为这是一个问题

标签： php javascript html css forms

【解决方案1】：

如果$theID 是一个字符串，你需要在它周围加上引号：

     <input  onclick="return cross('<?php echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>

也将其从您的函数中删除：

got_elements_id

会导致引用错误。

【讨论】：

能否“返回交叉（this.checked）”返回不可预测的数据？ IE。错误的上下文会不会很麻烦？
@EricG 如果你这样做，你将没有 ID 或对元素的引用来进行删除。
我想你的意思是onclick="return cross('<?=$theID?>');"
不，没有解决它。如果我注释掉 if 语句，它会起作用
@MrCode "return cross(this)" 应该更好，我认为样式应用于另一个对象，我的错。 jsfiddle.net/QnQ4k

【解决方案2】：

我相信这样会更好：

echo '<li id="'.$theID.'">'.$item.'</li>' ;?>
<form >
    <input  onclick="return cross('<? echo $theID; ?>');" type="checkbox" name="done<?php $li_id_num_done ?>"/>
</form>

和

function cross( id ){

    var element = document.getElementById( id );
    if( element.checked){

        element.style.textDecoration = "line-through";
    }
}

甚至：

function cross( id ){

    var element = document.getElementById( id );        
    element.style.textDecoration = element.checked ? "line-through" : "";
}

这还可以取消选中和删除换行。

【讨论】：

它没有做它应该做的什么？
复选框旁边的li十字
我终于看到它具有来自不同元素的 ID 作为参数，我的错。