在jQuery中按类名隔离div

Question

我正在使用名为jquery upload preview的插件上传图片并将div上的图片预览为背景。

在我的网页中，我使用相同的类名动态创建越来越多的div，但由于类名都相同，因此上传预览将适用于所有人。我希望每个其他div都能彼此隔离/区分。

我可以在这里申请任何解决方案吗？请查看this link，它是我隔离问题的笔。

该插件使用$ .uploadPreview（供您快速参考），该字段名为preview_box：＆＃39; .imgCard＆＃39;，

非常感谢你们。

以下是HTML和JS中的代码。

HTML

<section id="alterationForm1">
    <div class="card">
        <div class="imgPreview" class="text-center">
            <div class="imgCard">
                <input type="file" name="front_image" id="front-image-upload" />
            </div>
        </div>
        <!--Dropdown List-->
        <div class="form-group">
            <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
            <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                <option value="button">Button</option>
                <option value="stitching">Stitching</option>
                <option value="cloth">Cloth</option>
                <option value="fabrics">Fabrics</option>
                <option value="otherClick">Other</option>
            </select>
        </div>
        <div class="hideMe textBoxDiv">
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Additional alteration details</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
        </div>
        <!--text box div-->
        <div class="submitButton text-center">
            <a href="#" class="btn btn-success btn-pill">Submit</a>
        </div>
        <!--submitButton-->
    </div>
    <!--card-->
</section>
<!--alteration form-->
<div class="demoClass">
    <div class="card" data-duplicate="demo">
        <div class="imgCard" value="imageArea">
            <input type="file" name="front_image" id="front-image-upload" />
        </div>
        <!--Dropdown List-->
        <div class="form-group">
            <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
            <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                <option value="button">Button</option>
                <option value="stitching">Stitching</option>
                <option value="cloth">Cloth</option>
                <option value="fabrics">Fabrics</option>
                <option value="otherClick">Other</option>
            </select>
        </div>
        <div class="hideMe textBoxDiv">
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Additional alteration details</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
        </div>
        <!--text box div-->
        <div class="submitButton text-center">
            <a href="#" class="btn btn-success btn-pill">Submit</a>
        </div>
        <!--submitButton-->
    </div>
    <!--card-->
    <div id="addOnButton" class="text-center">
         <button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
    </div>
</div>
<!--demo class-->

Jquery PART

//question mark tooltip
$('[data-toggle="tooltip"]').tooltip();

//uploading image
$.uploadPreview({
    input_field: "#front-image-upload",   // Default: .image-upload
    preview_box:  ".imgCard",    // Default: .image-label
    label_default: "Choose File",   // Default: Choose File
    label_selected: "Change File",  // Default: Change File
    no_label: false                 // Default: false
});
$('body').on('change', '.alterationTypeSelect', function () {
    var val = $(this).val();
    if (val === 'otherClick') {

        $(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
    } else {

        $(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
    }   
});
//Dynamic Adding
$("#czContainer").czMore();

敬请帮助。非常感谢你。

我可以通过动态创建的其他.imgCard div与类.imgCard隔离div。

编辑：生成div的函数是＆＃34; $（＆＃34;＃czContainer＆＃34）。czMore（）; ＆＃34;它由另一个名为jquery duplicate的插件提供支持。该函数在jquery代码的末尾提到。

Answer 1

此plugin没有太多自定义。

ID是唯一的 - 因此您不应该有多个#front-image-upload。请改用例如.front-image-upload

<div class="imgCard">
    <input type="file" name="front_image" class="front-image-upload" />
</div>

在eq()的循环中使用$.uploadPreview()。

function bindUploadPreview() {
    $('.imgCard').each(function (i) {
        var inputField = ".front-image-upload:eq(" + i + ")",
            previewBox = ".imgCard:eq(" + i + ")";
        // unbind onchange
        $(inputField).unbind();
        // bind onchange
        $.uploadPreview({
            input_field: inputField,
            preview_box: previewBox,
            label_default: "Choose File",
            label_selected: "Change File",
            no_label: false
        });
    });
}

就动态创建的卡而言，您可以收听duplicate.add事件处理程序。然后再次调用上面的函数。请注意，使用unbind删除onchange事件。

$('body').on('duplicate.add', bindUploadPreview);

Demo

Answer 2

首先，你不能在不改变id的情况下克隆带有id的div，因为在html中id必须是唯一的。

您需要做的是必须操纵新添加的行并将id="front-image-upload"更改为id="front-image-upload-2"和class="imgCard"更改为class="imgCard-2"（或创建新课程，如果如果你用imgCard-2替换imgCard用于第二个克隆行，你将会失去一些样式，依此类推。您可以使用onAdd czMore上的回调函数执行此操作，如下所示：

$("#czContainer").czMore({
    onAdd: function(){

        //Manipulate the id of the new cloned row here and also set the preview upload for the new id

        $.uploadPreview({
            input_field: "#front-image-upload-2",   // Default: .image-upload
            preview_box:  ".imgCard-2",    // Default: .image-label
            label_default: "Choose File",   // Default: Choose File
            label_selected: "Change File",  // Default: Change File
            no_label: false                 // Default: false
        });
    }
});

我希望这会有所帮助。但是您需要为新克隆的行生成新的类和id目标，以避免uploadPreview以具有相同类或ID的元素为目标

Answer 3

尝试通过类捕获所有元素，迭代它们，然后为每个元素添加一个唯一的类。

尝试将此添加到您的代码中：

 $(document).ready(function() { 

   let myImages = $('.imgCard');

   for (let i=0; i < k.length; i++) {
      myImages.classList.add('myImage' + i);
   } 
});

Answer 4

我认为你在页面中使用id为单个输入字段的jquery插件，因此对于多个输入，你必须以不同的方式分配$.uploadPreview，但在这里你也有动态添加的内容，因此很难管理使用此方法的所有元素，

因此，您可以使用此代码而不是使用此插件：

//question mark tooltip
$('[data-toggle="tooltip"]').tooltip();
  function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $(input).parents('.imgCard').css('background', 'url('+ e.target.result +') center center no-repeat');
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
    $('body').on('change', '#front-image-upload', function() {
        readURL(this);
    });

//Dynamically adding when clicked on the "Add more" button
$('body').on('change', '.alterationTypeSelect', function () {
    var val = $(this).val();
    if (val === 'otherClick') {
        $(this).parent().parent().find('.textBoxDiv').removeClass('hideMe');
    } else {
        $(this).parent().parent().find('.textBoxDiv').addClass('hideMe');
    }   
});

//Dynamic Adding
$("#czContainer").czMore();

/*gobal*/
body,
html{
    padding: 0 1rem;
    margin: 0;
    height: 100%;
}
#alteration{
    padding: 1rem 0 0;
}
.hideMe{
    display: none;
}
.hideMe2{
    display: none;
}
h3{
    font-family: 'Open Sans', sans-serif;
}
p{
    margin: 0;
    padding: 0;
}
#addOnButton .btn-danger{
    margin: 1rem 0;
}
/*Alteration Section*/
/*spans*/
.imgCard i, .imgCard2 i{
    font-size: 1.3rem;
}
/*Cards*/
.card{
    padding: .5rem;
    width: 100%;
    margin-bottom: 1rem;
    text-align: center;
}
.dropdown-el {
  width: 100%;
  position: relative;
  display: inline-block;
  max-height: 2em;
  overflow: hidden;
  top: .5em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #444;
  outline: none;
  border: .06em solid transparent;
  border-radius: 1em;
  background-color: #cde4f5;
  transition: 0.3s all ease-in-out;
}
.dropdown-el input {
  display: none;
}
.dropdown-el label {
  border-top: .06em solid #d9d9d9;
  display: block;
  height: 2em;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
}
.dropdown-el label:nth-child(2) {
  margin-top: 2em;
  border-top: .06em solid #d9d9d9;
}
.dropdown-el input:checked + label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
}
.dropdown-el input:checked + label:nth-child(2) {
  margin-top: 0;
  position: relative;
}
.dropdown-el::after {
  content: "";
  position: absolute;
  right: 0.8em;
  top: 0.9em;
  border: 0.3em solid #3694d7;
  border-color: #3694d7 transparent transparent transparent;
  transition: .4s all ease-in-out;
}
.dropdown-el.expanded {
  border: 0.06em solid #3694d7;
  background: #fff;
  border-radius: .25em;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  max-height: 15em;
}
.dropdown-el.expanded label {
  border-top: .06em solid #d9d9d9;
}
.dropdown-el.expanded label:hover {
  color: #3694d7;
}
.dropdown-el.expanded input:checked + label {
  color: #3694d7;
}
.dropdown-el.expanded::after {
  transform: rotate(-180deg);
  top: .55em;
}
/*Dropdown el2*/
.dropdown-el2 {
  width: 100%;
  position: relative;
  display: inline-block;
  max-height: 2em;
  overflow: hidden;
  top: .5em;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: #444;
  outline: none;
  border: .06em solid transparent;
  border-radius: 1em;
  background-color: #cde4f5;
  transition: 0.3s all ease-in-out;
}
.dropdown-el2 input {
  display: none;
}
.dropdown-el2 label {
  border-top: .06em solid #d9d9d9;
  display: block;
  height: 2em;
  line-height: 2em;
  padding-left: 1em;
  padding-right: 3em;
  cursor: pointer;
  position: relative;
  transition: 0.3s color ease-in-out;
}
.dropdown-el2 label:nth-child(2) {
  margin-top: 2em;
  border-top: .06em solid #d9d9d9;
}
.dropdown-el2 input:checked + label {
  display: block;
  border-top: none;
  position: absolute;
  top: 0;
}
.dropdown-el2 input:checked + label:nth-child(2) {
  margin-top: 0;
  position: relative;
}
.dropdown-el2::after {
  content: "";
  position: absolute;
  right: 0.8em;
  top: 0.9em;
  border: 0.3em solid #3694d7;
  border-color: #3694d7 transparent transparent transparent;
  transition: .4s all ease-in-out;
}
.dropdown-el2.expanded2 {
  border: 0.06em solid #3694d7;
  background: #fff;
  border-radius: .25em;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 5px 0px;
  max-height: 15em;
}
.dropdown-el2.expanded2 label {
  border-top: .06em solid #d9d9d9;
}
.dropdown-el2.expanded2 label:hover {
  color: #3694d7;
}
.dropdown-el2.expanded2 input:checked + label {
  color: #3694d7;
}
.dropdown-el2.expanded2::after {
  transform: rotate(-180deg);
  top: .55em;
}
.imgCard{
    background: url(http://abhisheksuresh.online/alter/assets/uploadImage.svg)center center no-repeat;
    height: 128px;
/*    width: 128px;*/
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.imgCard input {
  line-height: 128px;
  font-size: 128px;
  position: absolute;
  opacity: 0;
  z-index: 10;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
/*
.imgCard label {
  position: absolute;
  z-index: 5;
  opacity: 0.8;
  cursor: pointer;
  background-color: #bdc3c7;
  width: 100px;
  height: 50px;
  font-size: 10px;
  line-height: 50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}
*/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://abhisheksuresh.online/alter/css/shards.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://abhisheksuresh.online/alter/js/shards.min.js"></script>
<script
src="http://abhisheksuresh.online/alter/js/jquery.duplicate.min.js"></script>

<script
src="http://abhisheksuresh.online/alter2/js/jquery.uploadPreview.min.js"></script>




<section id="alterationForm1">
  <div class="card">
     <div class="imgPreview" class="text-center">
      <div class="imgCard">
       <input type="file" name="front_image" id="front-image-upload" />
    </div>
    </div>
    <!--Dropdown List-->
    <div class="form-group">
      <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
      <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                      <option value="button">Button</option>
                      <option value="stitching">Stitching</option>
                      <option value="cloth">Cloth</option>
                      <option value="fabrics">Fabrics</option>
                      <option value="otherClick">Other</option>
                    </select>
    </div>
    <div class="hideMe textBoxDiv">
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Additional alteration details</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
    </div>
    <!--text box div-->
    <div class="submitButton text-center">
      <a href="#" class="btn btn-success btn-pill">Submit</a>
    </div>
    <!--submitButton-->
  </div>
  <!--card-->
</section>
<!--alteration form-->
<div class="demoClass">
  <div class="card" data-duplicate="demo">
    <div class="imgCard" value="imageArea">
       <input type="file" name="front_image" id="front-image-upload" />
    </div>
    <!--Dropdown List-->
    <div class="form-group">
      <label for="exampleFormControlSelect1"><p class="dropDownLabel">Select alteration type</p></label>
      <select class="form-control alterationTypeSelect" name="alterationTypeSelect">
                      <option value="button">Button</option>
                      <option value="stitching">Stitching</option>
                      <option value="cloth">Cloth</option>
                      <option value="fabrics">Fabrics</option>
                      <option value="otherClick">Other</option>
                    </select>
    </div>
    <div class="hideMe textBoxDiv">
      <div class="form-group">
        <label for="exampleFormControlTextarea1">Additional alteration details</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
      </div>
    </div>
    <!--text box div-->
    <div class="submitButton text-center">
      <a href="#" class="btn btn-success btn-pill">Submit</a>
    </div>
    <!--submitButton-->
  </div>
  <!--card-->
  <div id="addOnButton" class="text-center">
    <button class="btn-danger btn-sm" data-duplicate-add="demo">Add More</button>
  </div>
</div>
<!--demo class-->