如何在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); }
            }  
       });

但它没有起作用。如何在

gallery-1

div中引用输入

id='id\u gallery\u set-1-title'

编辑：

此代码适用于第一个表单集：

$(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); }
            }

       });

我的表格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>

{{formset.management_form}
{%csrf_令牌%}
事件
{{form | crispy}}
照片库
{formset%中表单的%s}
{{form | crispy}}
{%endfor%}
拯救

这是我的完整表格：

事件
姓名*
说明*
标签
照片库
标题*
鼻涕虫*
形象
事件图片
删除
标题：
鼻涕虫：
图像：
事件图片
删除：
拯救

控制台错误：

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

未知属性'-moz outline'。声明已删除。创建：1:4347
未知属性'-moz-box-shadow'。声明已删除。创建时间：1:5300
应为声明，但找到“*”。已跳过到下一个声明。创建：1:6215
应为“无”、URL或筛选器函数，但找到“alpha（”。分析“筛选器”的值时出错。声明已删除。创建：1:9330
标题：
鼻涕虫：
图像：
事件图片
删除：
图.js:8:13
不推荐使用getPreventDefault（）。请使用defaultPrevented inste

---

您可以使用

querySelector（）

：

不确定您想要实现什么，但由于您使用的是jQuery，因此可以附加事件，如：

$(document).ready(function () {
    $('#gallery-1 #id_gallery_set-1-title').on('input', function(){
         //Get click element using '$(this)'

        if( CONDITION ){

        }
    });
});

---

希望这有帮助。

您可以使用

querySelector（）

：

不确定您想要实现什么，但由于您使用的是jQuery，因此可以附加事件，如：

$(document).ready(function () {
    $('#gallery-1 #id_gallery_set-1-title').on('input', function(){
         //Get click element using '$(this)'

        if( CONDITION ){

        }
    });
});

---

希望这有帮助。

您不需要使用父选择器#gallery-1，因为您有id。id对于所有DOM元素都必须是唯一的。 我不知道e.更改了什么，也不知道您希望如何处理此支票，因此我确信if（！e.更改）将始终返回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); }
        }  
   });

---

您不需要使用父选择器#gallery-1，因为您有id。id对于所有DOM元素都必须是唯一的。 我不知道e.更改了什么，也不知道您希望如何处理此支票，因此我确信if（！e.更改）将始终返回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); }
        }  
   });

---

它应该对您有所帮助。每当文本框中发生文本更改事件时，由id为gallery-1的div的子级引用

$（“#gallery-1>#id#gallery_set-1-title”）。在（“输入”，函数（）{
警报（$（this.val（））；
})；

---

它应该对您有所帮助。每当文本框中发生文本更改事件时，请按id为gallery-1的div的子级引用

$（“#gallery-1>#id#gallery_set-1-title”）。在（“输入”，函数（）{
警报（$（this.val（））；
})；

---

您可以尝试以下简洁的语法：

 $(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更改为类

注意：将此语法放在页面底部的脚本标记中

$（文档）.ready（函数（）{
$（'body'）。在（'input'，'div[id^=“gallery-”]input[id$=“title”]”上，函数（）{
el=$（this.parent（）.find（'>input[id$=“slug”]'）；
el.val（$（this.val（）+'xxxxxxxxxxx'）；
});
})；

---

您可以尝试以下简洁的语法：

 $(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更改为类

注意：将此语法放在页面底部的脚本标记中

$（文档）.ready（函数（）{
$（'body'）。在（'input'，'div[id^=“gallery-”]input[id$=“title”]”上，函数（）{
el=$（this.parent（）.find（'>input[id$=“slug”]'）；
el.val（$（this.val（）+'xxxxxxxxxxx'）；
});
})；

你有一个非常奇怪的jQuery和vanilla JS的混合

文档。getElementById

只接受一个参数。一个

id

你有一个非常奇怪的jQuery和vanilla JS的混合

文档。getElementById

只接受一个参数。我正在使用javascript urlify.JS。如果我使用querySelector（）我正在使用javascript urlify.js。如果使用querySelector（）是否有效我尝试使用你的代码，但不起作用。我想在表单中删除标题。但它阻止了我的表单响应。请描述一下你的一般任务。在表单中，我有两个以上的字段。一个是标题，另一个是slug。我想删除从标题填充的字段。当我键入标题或更改标题字段时，slug字段自动更新。它起作用了在普通表单中可以，但在嵌套表单中无效。我尝试使用您的代码，但无效。我想在表单中使用标题。但它阻止了我的表单响应。请描述一下您的一般任务。在表单中，我有两个以上的字段。一个是标题