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

Question

我对此有点困惑。

为什么控制台中#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/

Answer 1

如果您只想以__ 开头的ID 为目标，那么为DOM 中的每个元素添加一个点击处理程序真的很昂贵。

将单个委托点击处理程序与以这些元素为目标的选择器一起使用。

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

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

});

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

DEMO

Answer 2

甚至这个。

<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'));
    });

Answer 3

答案是：“var content = this.html();”无效。 javascript 元素上没有 .html()，.html() 来自 JQuery 库，因此它必须是 JQuery 元素，因此，“var content = $(this).html();”让它工作。我认为这就是你从所有其他 cmets 那里得到的结果。

Answer 4

有很多更好的方法来写这个，但是你刚刚开始为什么不做类似的事情。

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

Answer 5

只需将 'this' 关键字替换为 $(this) 和用户 .attr('id') 而不是 .id 即可。