javascript - 如何使用 jQuery 在输入标记内添加属性？

Question

HTML 是:

<div class="form-item" id="edit-image-upload-wrapper"><img id="img_prev" src="#">
     <label for="edit-image-upload">Upload Your Picture: <span class="form-required" title="This field is required.">*</span></label>
     <input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60"></input>

     <div class="description"><p>You need to provide a passport sized image in jpg/jpeg or png format. The image size has to be 100kb or lower.</p>
    </div>
    </div>

JS代码:

$('#edit-image-upload-wrapper input').prepend('onchange="readURL(this);"');

由于此 JS 代码输入标记已更改如下:

<input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60">onchange="readURL(this);"</input> 

我想更改如下:

 <input type="file" name="files[image_upload]" class="form-file required" id="edit-image-upload" size="60" onchange="readURL(this);"></input> 

我该怎么做？

Answer 1

一般来说，要向元素添加(或更新)属性，可以使用 attr :

$('#edit-image-upload-wrapper input').attr('onchange', 'readURL(this);');

由于该属性反射(reflect)为属性， prop 也可以:

$('#edit-image-upload-wrapper input').prop('onchange', 'readURL(this);');

但是，当您使用 jQuery 时，我看不出这样做有什么好的理由，而不是使用正确的 event hookup ，如:

$('#edit-image-upload-wrapper input').on('change', function() {
    readURL(this);
});

如果您可以更改 readURL函数，以便它从 this 获取 URL而不是从第一个参数开始，这可以更简单:

// Requires small change to `readURL`
$('#edit-image-upload-wrapper input').on('change', readURL);

<小时/>

旁注 1:您的 input有自己的id值( edit-image-upload )，因此这些选择器可以简单地是 #edit-image-upload ，而不是 #edit-image-upload-wrapper input .

<小时/>

附注 2:您的 HTML 无效。 input元素是 "void" elements ，它们从来没有内容，所以你永远不会为它们编写结束标签。例如，你永远不会写</input> 。任何不能包含内容的元素( input 、 br 、 hr 和其他一些元素)永远不会使用结束标记编写。