javascript - 将相同的文本添加到多个不同大小的 div

Question

目前，我可以使用文本和文件输入将文本添加到单个 div(目前为#adXL)。如何将相同的文本和文件(来自相同的文本和文件输入)添加到多个 div(#adL、#adM、#adS)？

我还希望能够添加更多接收相同文本和文件输入的 div。

这是我当前的代码:

document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
   var file = document.getElementById("getval").files[0];
   var reader = new FileReader();
   reader.onloadend = function(){
      document.getElementById('adXL').style.backgroundImage = "url(" + reader.result + ")";        
   }
   if(file){
      reader.readAsDataURL(file);
    }else{
    }
}

document.getElementById('getval2').addEventListener('change', readURL2, true);
function readURL2(){
   var file2 = document.getElementById("getval2").files[0];
   var reader2 = new FileReader();
   reader2.onloadend = function(){
      document.getElementById('logo').style.backgroundImage = "url(" + reader2.result + ")";        
   }
   if(file2){
      reader2.readAsDataURL(file2);
    }else{
    }
}



$(document).ready(function(){
    var div1 = $('#header')[0];

    $('#text1').bind('keyup change', function() {
        div1.innerHTML = this.value;
    }); 

    var div2 = $('#subHeader')[0];

    $('#text2').bind('keyup change', function() {
        div2.innerHTML = this.value;
    });

    var div3 = $('#button')[0];

    $('#text3').bind('keyup change', function() {
        div3.innerHTML = this.value;
        if(this.value.length > 0) {
            $('#button').css('display', 'block')
        } else {
           $('#button').css('display', 'none')
        }
    });
});

h2 {
font-size: 14px;
}

#adXL{
   background-image:url('');
   background-size:cover;
   background-position: center;
  background-repeat: no-repeat;
min-height: 300px;
  min-width: 0;
   border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  margin: 20px 0px;
  background-color: transparent;
  padding: 30px;
  z-index: 10000;
  position: relative;
}

#logo{
   background-image:url('');
   background-size: auto 100%;
   background-position: center left;
  background-repeat: no-repeat;
min-width: 0;
  width: 100px;
  min-height: 50px;
  display: flex;
  margin: 30px 0 0 0;

}
#adCopy {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column;
}
#adButtonAndLogo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}
#header {
  font-size: 52px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 600;
  margin: 0px;
  line-height: 110%;
}

#subHeader {
  font-size: 24px;
  color: black;
  font-family: "helevtica", sans-serif;
  font-weight: 400;
  margin: 10px 0;
  display: block;
  margin-right: auto;
}

#button {
  font-size: 18px;
  color: white;
  font-family: "helevtica", sans-serif;
  font-weight: 300;
  padding: 16px 24px;
  border: 0px solid #fff;
  border-radius: 3px;
  text-align: center;
  display: none;
background-color: #1D41FF;
  letter-spacing: 1px;
  margin: 60px 0 0 0;
  box-shadow: 0 2px 7px rgba(0,0,0,0.4);
}
#adL {
?
}

#adM {
?
}

#adS {
?
}

...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" /> 

<h2>Header</h2><input id="text1" class="textInput">

<h2>Subheader</h2><input id="text2" class="textInput">

<h2>Button Text</h2>
  <input id="text3" class="textInput">
  
  <h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />


<div id='adXL' class="bg-img">
  <div id="adCopy">
 <div id="header" class="changeMe"></div>
    <div id="subHeader" class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div id="button"></div>

  </div>
</div>


<div id='adL' class="bg-img">
  <div id="adCopy">
 <div id="header" class="changeMe"></div>
    <div id="subHeader" class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div id="button"></div>

  </div>
</div>

<div id='adM' class="bg-img">
  <div id="adCopy">
 <div id="header" class="changeMe"></div>
    <div id="subHeader" class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div id="button"></div>

  </div>
</div>

<div id='adS' class="bg-img">
  <div id="adCopy">
 <div id="header" class="changeMe"></div>
    <div id="subHeader" class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div id="button"></div>

  </div>
</div>

Answer 1

创建一个数组，其中包含要添加样式的元素、要添加文本的元素、要监听文本更改的元素以及要监听文件更改的元素。然后，遍历它们:

const textInputs = document.querySelectorAll('input:not([type="file"])');
const elementsToChangeOnTextInput = [...document.querySelectorAll('.changeMe')];
const fileInputs = document.querySelectorAll('input[type="file"]');
const elementsToChangeOnFileInput = ['#adXL', '#adL', '#adM', '#adS']
  .map(selector => document.querySelector);

textInputs.forEach((textInput) => {
  textInput.addEventListener('keyup', () => {
    const newValue = textInput.value;
    elementsToChangeOnTextInput
      .forEach(element => element.textContent = newValue);
  });
});

fileInputs.forEach((fileInput) => {
  const file = fileInput.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.addEventListener('loadend', function(){
    const imgCSSStr = `url(${reader.result})`;
    elementsToChangeOnFileInput.forEach(element => {
      element.style.backgroundImage = imgCSSStr;
    });
  });
  reader.readAsDataURL(file);
});

h2 {
font-size: 14px;
}

#adXL{
   background-image:url('');
   background-size:cover;
   background-position: center;
  background-repeat: no-repeat;
min-height: 300px;
  min-width: 0;
   border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  margin: 20px 0px;
  background-color: transparent;
  padding: 30px;
  z-index: 10000;
  position: relative;
}

#logo{
   background-image:url('');
   background-size: auto 100%;
   background-position: center left;
  background-repeat: no-repeat;
min-width: 0;
  width: 100px;
  min-height: 50px;
  display: flex;
  margin: 30px 0 0 0;

}
#adCopy {
  display: flex;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Background Image</h2>
<input type='file' id='getval' name="background-image" /> 

<h2>Header</h2><input id="text1" class="textInput">

<h2>Subheader</h2><input id="text2" class="textInput">

<h2>Button Text</h2>
  <input id="text3" class="textInput">
  
  <h2>Logo Image Asset</h2>
<input type='file' id='getval2' name="background-image" />


<div id='adXL' class="bg-img">
  <div id="adCopy">
 <div class="changeMe"></div>
    <div class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div class="changeMe"></div>

  </div>
</div>


<div id='adL' class="bg-img">
  <div id="adCopy">
 <div class="changeMe"></div>
    <div class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div class="changeMe"></div>

  </div>
</div>

<div id='adM' class="bg-img">
  <div id="adCopy">
 <div class="changeMe"></div>
    <div class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div class="changeMe"></div>

  </div>
</div>

<div id='adS' class="bg-img">
  <div id="adCopy">
 <div class="changeMe"></div>
    <div class="changeMe"></div>
  </div>
  <div id="adButtonAndLogo">
    <div id="logo"></div>
    <div class="changeMe"></div>

  </div>
</div>