javascript - 如何在javascript中使用div id引用输入id

Question

这是我的 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_gallery_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>

这是我对表单的全面检查:

<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

Answer 1

您可以尝试这种干净的语法，例如:

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

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

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