如何在javascript中使用div id引用输入id
这是我的div图像：
我想在gallery-1潜水中引用输入ID。我试过这个剧本：
$(document).ready(function () {
document.getElementById('#gallery-1','id_gallery_set-1-title').onchange = function() {
var e = document.getElementById('#gallery-1','id_gallery_set-1-slug');
if (!e._changed) { e.value = URLify(document.getElementById('#gallery-1','id_gallery_set-1-title').value, 50); }
}
});
但它没有用。如何在id='id_gallery_set-1-title' div中引用输入gallery-1？
编辑：
此代码适用于第一个formset：
$(document).ready(function () {
document.getElementById('id_gallery_set-0-title').onchange = function() {
var e = document.getElementById('id_gallery_set-0-slug');
if (!e._changed) { e.value = URLify(document.getElementById('id_gallery_set-0-title').value, 50); }
}
});
MY form html：
<form action="." method="post" enctype="multipart/form-data">
{{ formset.management_form }}
{% csrf_token %}
<legend>Event</legend>
<div class="event">
{{ form|crispy}}
</div>
<legend>
<div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
Photo Gallery
</legend>
<div class="gallery form-inline">
{% for form in formset %}
{{ form|crispy }}
{% endfor %}
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
这是我对表格的全面检查：
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="panel panel-default">
<div class="panel-body">
<form action="." method="post" enctype="multipart/form-data">
<input id="id_gallery_set-TOTAL_FORMS" name="gallery_set-TOTAL_FORMS" value="2" type="hidden"><input id="id_gallery_set-INITIAL_FORMS" name="gallery_set-INITIAL_FORMS" value="0" type="hidden"><input id="id_gallery_set-MIN_NUM_FORMS" name="gallery_set-MIN_NUM_FORMS" value="1" type="hidden"><input id="id_gallery_set-MAX_NUM_FORMS" name="gallery_set-MAX_NUM_FORMS" value="1000" type="hidden">
<input name="csrfmiddlewaretoken" value="QrSlXahV8qshQCefhNwcF1wrd4eWfDuX0UTslT3lYsyheDCdJ8GQrcBQ0IPrYqiK" type="hidden">
<legend>Event</legend>
<div class="event">
<div id="div_id_name" class="form-group"> <label for="id_name" class="control-label requiredField">
Name<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_name" maxlength="31" name="name" required="" type="text"> </div> </div> <div id="div_id_description" class="form-group"> <label for="id_description" class="control-label requiredField">
Description<span class="asteriskField">*</span> </label> <div class="controls "> <textarea class="textarea form-control" cols="40" id="id_description" name="description" rows="10" required=""></textarea> </div> </div> <div id="div_id_tags" class="form-group"> <label for="id_tags" class="control-label ">
Tags
</label> <div class="controls "> <select multiple="multiple" class="selectmultiple form-control" id="id_tags" name="tags">
</select> </div> </div>
</div>
<legend>
<div class="pull-right"><a href="#" class="btn btn-inverse add-photo"><i class="icon-plus icon-white"></i> Add Photo</a></div>
Photo Gallery
</legend>
<div class="gallery form-inline">
<div id="div_id_gallery_set-0-title" class="form-group"> <label for="id_gallery_set-0-title" class="control-label requiredField">
Title<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_gallery_set-0-title" maxlength="35" name="gallery_set-0-title" type="text"> </div> </div> <div id="div_id_gallery_set-0-slug" class="form-group"> <label for="id_gallery_set-0-slug" class="control-label requiredField">
Slug<span class="asteriskField">*</span> </label> <div class="controls "> <input class="textinput textInput form-control" id="id_gallery_set-0-slug" maxlength="35" name="gallery_set-0-slug" readonly="readonly" type="text"> </div> </div> <div id="div_id_gallery_set-0-image" class="form-group"> <label for="id_gallery_set-0-image" class="control-label ">
Image
</label> <div class="controls "> <input class="clearablefileinput" id="id_gallery_set-0-image" name="gallery_set-0-image" type="file"> <p id="hint_id_gallery_set-0-image" class="help-block">Event Picture</p> </div> </div> <input id="id_gallery_set-0-id" name="gallery_set-0-id" type="hidden"> <div class="form-group"> <div id="div_id_gallery_set-0-DELETE" class="checkbox"> <label for="id_gallery_set-0-DELETE" class=""> <input class="checkboxinput" id="id_gallery_set-0-DELETE" name="gallery_set-0-DELETE" type="checkbox">
Delete
</label> </div> </div> <input id="id_gallery_set-0-event" name="gallery_set-0-event" type="hidden">
<div id="gallery-1">
<label for="id_gallery_set-1-title">Title:</label><input id="id_gallery_set-1-title" maxlength="35" name="gallery_set-1-title" type="text">
<label for="id_gallery_set-1-slug">Slug:</label><input id="id_gallery_set-1-slug" maxlength="35" name="gallery_set-1-slug" readonly="readonly" type="text">
<label for="id_gallery_set-1-image">Image:</label><input id="id_gallery_set-1-image" name="gallery_set-1-image" type="file"><br><span class="helptext">Event Picture</span>
<label for="id_gallery_set-1-DELETE">Delete:</label><input id="id_gallery_set-1-DELETE" name="gallery_set-1-DELETE" type="checkbox"><input id="id_gallery_set-1-id" name="gallery_set-1-id" type="hidden"><input id="id_gallery_set-1-event" name="gallery_set-1-event" type="hidden">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
控制台错误：
Unknown property ‘-moz-outline’. Declaration dropped.create:1:4347
Unknown property ‘-moz-box-shadow’. Declaration dropped.create:1:5300
Expected declaration but found ‘*’. Skipped to next declaration.create:1:6215
Expected ‘none’, URL, or filter function but found ‘alpha(’. Error in parsing value for ‘filter’. Declaration dropped.create:1:9330
<div id="gallery-1">
<tr><th><label for="id_gallery_set-1-title">Title:</label></th><td><input id="id_gallery_set-1-title" maxlength="35" name="gallery_set-1-title" type="text" /></td></tr>
<tr><th><label for="id_gallery_set-1-slug">Slug:</label></th><td><input id="id_gallery_set-1-slug" maxlength="35" name="gallery_set-1-slug" readonly="readonly" type="text" /></td></tr>
<tr><th><label for="id_gallery_set-1-image">Image:</label></th><td><input id="id_gallery_set-1-image" name="gallery_set-1-image" type="file" /><br /><span class="helptext">Event Picture</span></td></tr>
<tr><th><label for="id_gallery_set-1-DELETE">Delete:</label></th><td><input id="id_gallery_set-1-DELETE" name="gallery_set-1-DELETE" type="checkbox" /><input id="id_gallery_set-1-id" name="gallery_set-1-id" type="hidden" /><input id="id_gallery_set-1-event" name="gallery_set-1-event" type="hidden" /></td></tr>
</div>
photo.js:8:13
Use of getPreventDefault() is deprecated. Use defaultPrevented inste
4 个答案:
答案 0 :(得分：0)
您可以使用querySelector()：
document.querySelector('#gallery-1 #id_gallery_set-1-title');
不确定您要实现的目标，但由于您使用的是jQuery，因此可以附加以下事件：
$(document).ready(function () {
$('#gallery-1 #id_gallery_set-1-title').on('input', function(){
//Get click element using '$(this)'
if( CONDITION ){
}
});
});
希望这有帮助。
答案 1 :(得分：0)
您不需要使用父选择器＃gallery-1，因为您有id。对于所有DOM元素，Id必须是唯一的。 我不知道e._changed是什么以及你想用这个检查做什么，所以我确定如果（！e._changed）总是返回true。
$(document).ready(function () {
document.querySelector('#id_gallery_set-1-title').addEventListener('change', function() {
var e = document.querySelector('#id_gallery_set-1-slug');
if (!e._changed) {
e.value = URLify(document.querySelector('#id_gallery_set-1-title').value, 50); }
}
});
答案 2 :(得分：0)
它应该对你有所帮助。文本框中的文本更改发生在该文本框中由id为 gallery-1
的div的子项引用
$("#gallery-1 > #id_gallery_set-1-title").on("input",function(){
alert($(this).val());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="gallery-1">
<input type="text" id="id_gallery_set-1-title">
<input type="button" value="submit">
</div>
</body>
</html>
答案 3 :(得分：0)
你可以试试这个干净的语法，如：
$(document).ready(function () {
$('body').on('input','div[id^="gallery-"] input[id$="title"]',function() {
el = $(this).parent().find('> input[id$="slug"]');
el.val( URLify($(this).val(),50))
});
});
或将ID更改为类
请注意将此语法放在页面底部的脚本标记中
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function() {
$('body').on('input','div[id^="gallery-"] input[id$="title"]',function() {
el = $(this).parent().find('> input[id$="slug"]');
el.val($(this).val() + 'xxxxxxxxxxxx');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="gallery-1">
<input type="text" id="id_gallery_set-1-title">
<input type="text" id="id_gallery-1-slug">
<div id="gallery-2">
<input type="text" id="id_gallery_set-2-title">
<input type="text" id="id_gallery-2-slug">
</div>
</div>
<div id="gallery-3">
<input type="text" id="id_gallery_set-3-title">
<input type="text" id="id_gallery-3-slug">
</div>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？