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

Element value not showing up in console when set via jQuery

本文关键字：显示 控制台 jQuery 元素 设置      更新时间：2023-09-26

我有点困惑。

为什么#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>

更新……

在对@charlietfl进行了许多不相关的讨论之后，我得出了一个明显的差异https://jsfiddle.net/n4pe07j6/1/

如果所有你想要的是目标ID的__在开始时，它是非常昂贵的添加一个点击处理程序到DOM中的每个元素。

使用单个委托的click处理程序和一个选择器来针对这些元素。

 $(document).on('click', '[id^="__"]', function(e){
     $('#edit').val($(this).html());
     $('#key').val(this.id)
});

编辑:输入的属性值不是表单提交的相关值。表单控件的value属性和该元素的value属性是有区别的。它是提交的value属性

演示

有很多更好的方法来写这个，但是作为你刚刚开始，为什么不这样做呢? 

<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>

答案是:"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'));
    });

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

相关文章：