Javascript 通过jQuery设置时，元素值未显示在控制台中

我对此有点困惑

为什么#edit的value属性在控制台中没有更改

我错过什么了吗

<div class="editor">
    <form>
        <input id="edit" value="" type="text">
        <input id="key" value="" type="hidden">
        <input value="Save" type="submit">
    </form>
</div>

<ul>
    <li> <span class="cursor" id="__optin-1">Value 1</span> </li>
    <li> <span class="cursor" id="__optin-2">Value 2</span> </li>
    <li> <span class="cursor" id="__optin-3">Value 3</span> </li>
</ul>

<script type="text/javascript">

    $( "*", document.body ).click(function( event ) {

        event.stopPropagation();

        var edit    = $('#edit');
        var key     = $('#key');

        var id      = this.id;
        var content = this.html();

        if ( id.substring(0,2) == "__") {

            console.log(this.id);
            console.log(content);

            edit.val(content);
            key.val(id);
        }

    });

</script>

值1
价值2
价值3

$（“*”，document.body）。单击（函数（事件）{
event.stopPropagation（）；
变量编辑=$（“#编辑”）；
var key=$（“#key”）；
var id=this.id；
var content=this.html（）；
if（id.substring（0,2）==“u uu”）{
console.log（this.id）；
控制台日志（内容）；
编辑.val（内容）；
key.val（id）；
}
});

更新

---

在与ks to@charlietfl进行了许多无关的讨论之后，我发现了一个明显的区别，如这里所示

只要将'this'关键字替换为$（this）和user.attr（'id'），而不是.id，就可以了。

有很多更好的方法来编写它，但既然您刚刚开始，为什么不这样做呢

<script type="text/javascript">

    function changeValue(elem){
        var $elem = $(elem);
        var id      = $elem.attr("id");
        var content = $elem.html();
        $('#edit').val(content);
        $('#key').val(id);
    }
</script>

<div class="editor">
    <form>
        <input id="edit" value="" type="text">
        <input id="key" value="" type="hidden">
        <input value="Save" type="submit">
    </form>
</div>

<ul>
    <li> <span class="cursor" id="__optin-1" onclick="changeValue(this)">Value 1</span> </li>
    <li> <span class="cursor" id="__optin-2" onclick="changeValue(this)">Value 2</span> </li>
    <li> <span class="cursor" id="__optin-3" onclick="changeValue(this)">Value 3</span> </li>
</ul>

函数更改值（elem）{
变量$elem=$（elem）；
变量id=$elem.attr（“id”）；
var content=$elem.html（）；
$（'编辑'）.val（内容）；
$（'#key'）.val（id）；
}

值1
价值2
价值3

如果您只想在开始时使用

\uuu

将ID作为目标，那么在DOM中的每个元素中添加一个click处理程序是非常昂贵的

将单个委托单击处理程序与针对这些元素的选择器一起使用

 $(document).on('click', '[id^="__"]', function(e){

     $('#edit').val($(this).html());
     $('#key').val(this.id)

});

编辑：输入的属性值不是表单提交的相关值。表单控件的value属性与该元素的value属性之间存在差异。提交的是value属性

答案是：“var content=this.html（）；”无效。javascript元素上没有.html（），.html（）来自JQuery库，因此它需要是JQuery元素，所以“var content=$（this）.html（）；”使其工作。我想这就是你从所有其他评论中得出的结论。

甚至是这个

<form>
        <input id="edit" value="" type="text">
        <input id="key" value="" type="hidden">
        <input value="Save" type="submit">
    </form>
</div>

<ul>
    <li> <span class="cursor" id="__optin-1">Value 1</span> </li>
    <li> <span class="cursor" id="__optin-2">Value 2</span> </li>
    <li> <span class="cursor" id="__optin-3">Value 3</span> </li>
</ul>

    $('.cursor').click(function( event ) {
        $('#edit').val($(this).html());
        $('#key').val($(this).attr('id'));
    });

值1
价值2
价值3

$（'.cursor'）。单击（函数（事件）{
$（'#edit'）.val（$（this.html（））；
$（'#key'）.val（$（this.attr（'id'））；
});

当jQuery中有$（this）时，为什么要使用此引用？因为使用本机DOM

this

比使用jQuery的

$（this）

及其方法更便宜，而且在很多情况下更简单。重要的是，为什么会有全局单击事件。？你想让这一切发生在任何人点击的地方吗？您先声明id，然后在日志中使用此.id。为什么？此外，“这”在示例中也非常不清楚。。。。ie这不取决于您单击的内容，也不取决于它是document.body.@Seabizkit-因为我必须确定单击哪个元素时，它可以位于文档中的任何位置，并且不必遵循任何特定的模式。你有更好的建议吗？这个代码的目的是什么？将抛出大量错误，因为并非所有元素都有id，而且许多元素没有innerHTML。只需将一个处理程序绑定到

文档

并使用事件targetUm也会更有意义。。控制台中的value属性仍然没有更改我没有将任何内容绑定到html的选项-onclick=“changeValue（this）”。。。我必须确定在单击时单击哪个元素，它可以位于文档中的任何位置，而不必遵循任何特定的模式。你的意思是什么？不允许您在html中单击使用？这是业务需求吗？从编码的角度来看，你可以大胆地。。。你是什么意思。。。您正在调用javascript函数。为什么要使用内联脚本？这是2015年，不是1999年。我问了一个关于jQuery的问题，这个问题与控制台中显示的值有关。我所做的事其实是无关紧要的。简而言之，我有一个动态的情况，我不能开始将JavaScript硬编码到HTML模板中。我需要做的是依赖于对任何给定文档的检测，并且必须能够适应不可预见的情况。我在这里发布的是我正在考虑的几种方法的一个小样本。我很感激你从自己独特的角度来研究这个问题，但当我问你是否有建议时，我推荐了点击检测。@charlietfl让我们不要去那里。。。但是同意。你知道为什么#edit的value属性在控制台中没有改变吗？创建一个复制它的演示。没有理由不应该有小提琴。。如果您检查元素，您将看到id为edit的元素的value属性没有改变。我试图理解为什么？属性与属性不同。您永远不会看到html中更新的输入值属性，属性已更新，因此隐藏的元素值被视为一个属性？您在元素检查器中看到了什么？这里是“仅我”还是表单中一个元素上的值已更新，但另一个元素上的值未更新？我相信这就是您所追求的：未捕获类型错误：this.html不是给定fiddle中的函数？？希望fiddle已更新和更正的代码。。。我是在回答为什么问题中的代码不起作用。这就是你在charlietfi提供了答案，其他人也回答并试图帮助你之后所问的问题。感谢所有的见解。。这是最新的提琴谢谢库马尔，我在这里演示了这个问题