通過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屬性之間存在差異。 它是提交的value屬性

DEMO

Answer 2

有很多更好的方法來寫這個，但是你剛剛開始為什么不做類似的事情。

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

答案是：“var content = this.html（）;” 無效。 javascript元素上沒有.html（），。html（）來自JQuery lib，因此它需要是一個JQuery元素，因此，“var content = $（this）.html（）;” 使它工作。 我認為這就是你從所有其他評論中獲取它之后的情況。

Answer 4

甚至這個。

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

只需將'this'關鍵字替換為$（this）和用戶.attr（'id'）而不是.id，你就可以了。