为具有不同 ID 名称的 div 提供内容

Question

我正在尝试创建一个带有添加按钮的网站，该按钮允许客户复制表单。在这样做的同时，我失去了由于重复而存在的 hide/show 选项功能。（ ifYes 和 ifNo divs，应根据客户选择显示）

我的问题出在我的 JavaScript 中的变量 'Valu' 左右。

下面是我的代码片段：

HTML:

<select id="ValuType" name="ValuType" onchange="priceAndCheck()">
    <option disabled="disabled" selected="selected">Type of Property</option>
    <option id="Apartment" value="Apartment">Apartment</option>
    <option id="Building" value="Building">Building</option>
    <option id="Farm" value="Farm">Farm</option>
    <option id="House" value="House">House</option>
    <option id="Land" value="Land">Land</option>
</select>


<div id="ifYes" class="ifYes">
...ifYes content comes here...
</div>

<div id="ifNo" class="ifNo">
...ifNo content comes here...
</div>

JavaScript:

    function yesnoCheck() {

    var Valu = document.getElementById("ValuType").value;

    if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
        document.getElementById('ifYes').style.height = '250px';
        document.getElementById('ifYes').style.display = 'block';
        document.getElementById('ifYes').style.transition = 'all 1s ease 0.59s';
        document.getElementById('ifNo').style.height = '0px';
        document.getElementById('ifNo').style.overflow = 'hidden';
        document.getElementById('ifNo').style.transition = '0.55s';
    }
    else if (Valu == 'Building' || Valu == 'House') {
        document.getElementById('ifNo').style.height = '250px';
        document.getElementById('ifNo').style.display = 'block';
        document.getElementById('ifNo').style.transition = 'all 1s ease 0.59s';
        document.getElementById('ifYes').style.height = '0px';
        document.getElementById('ifYes').style.overflow = 'hidden';
        document.getElementById('ifYes').style.transition = '0.55s';
    }
    else {
        document.getElementById('ifYes').style.overflow = 'hidden';
        document.getElementById('ifNo').style.overflow = 'hidden';
    }
}



function providePrice() {

var a = document.getElementById("Region").value;
var b = document.getElementById("ValuReq").value;
var c = document.getElementById("ValuType").value;
var d = document.getElementById("Express").value;
var e = 25;




if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="Yes")
{
    var x = 200 + e;
    document.getElementById("price").innerHTML = "Price: OMR " + x;

}

else if (a=="Region1" && b=="Bank" && c=="Apartment" && d=="No")
{
    var x = 200;
    document.getElementById("price").innerHTML = "Price: OMR " + x;
}

else if (a=="Region1" && b=="Bank" && c=="Building" && d=="Yes")
{
    var x = 350 + e;
    document.getElementById("price").innerHTML = "Price: OMR " + x;
}
...
...
...
else
{
    document.getElementById("price").innerHTML = "Price:"
}


    function getValue() {
if (document.getElementById("Express").checked) {
    document.getElementById("Express").value = "Yes";
 } else {
    document.getElementById("Express").value = "No";
 }
}


function priceAndCheck(){
    yesnoCheck();
    providePrice();
}

代码解释：
每当客户填写表格并选择某些选项时，它应该允许显示 div ifYes 或 ifNo 并填充价格。（价格连接到多个字段，）我正在使用 div 名称执行此操作，并且效果很好。但是，在克隆表单时，我无法为所有新克隆的表单生成 divs ifYes 和 ifNo。

我认为问题出在以下地方：

我的 div 命名是不变的（在所有克隆形式中完全相同）这是问题之一
调用 priceAndCheck() 调用两个函数 yesnoCheck() 和 providePrice() 的函数，如果我开始调用一个元素（例如 function test(selectElement) --尝试了 [Sam Apostel 的解决方案][1]，但无法根据我所有可用编码的要求查看选项。
克隆的 div 具有不同的 id 名称，但其中的所有其他 divs 具有相同的命名

如果能就处理此问题的最佳方法提供一些帮助，我们将不胜感激。

Answer 1

我认为这会解决您的问题（在 onchange="" 标签中使用 this）

$ = function(id) {
  return document.getElementById(id).style;
}
function priceAndCheck(selectElement){

yesnoCheck(selectElement);
}
function yesnoCheck(selectElement) {
  var show;
  var hide;
  var Valu = selectElement.value;
  if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
    show = $('ifYes');
    hide = $('ifNo');
  } else if (Valu == 'Building' || Valu == 'House') {
    show = $('ifNo');
    hide = $('ifYes');
  }
  show.height = '250px';
  show.display = 'block';
  show.transition = 'all 1s ease 0.59s';
  hide.height = '0px';
  hide.overflow = 'hidden';
  hide.transition = '0.55s';
}

<select id="form1" name="ValuType" onchange="priceAndCheck(this)">
    <option disabled="disabled" selected="selected">Type of Property</option>
    <option id="Apartment" value="Apartment">Apartment</option>
    <option id="Building" value="Building">Building</option>
    <option id="Farm" value="Farm">Farm</option>
    <option id="House" value="House">House</option>
    <option id="Land" value="Land">Land</option>
</select>


<div id="ifYes" class="ifYes">
  ...if Yes content comes here...
</div>

<div id="ifNo" class="ifNo">
  ...if No content comes here...
</div>

Answer 2

经过多次测试和代码编辑后，我提出了以下查询解决方案，其中我为每个克隆表单使用 class 名称，根据需要可以查看选项。

function yesnoCheck() {
  
  var Valu ='';
  var count = 0;
 
  $('.ValuType').each(function() {
   
   Valu = $(this).attr('id');
   Valu = document.getElementById(Valu).value;
   
   

      if (Valu == 'Apartment' || Valu == 'Farm' || Valu == 'Land') {
    document.getElementsByClassName('Yes')[count].style.height = '30px';
          document.getElementsByClassName('Yes')[count].style.display = 'block';
    document.getElementsByClassName('Yes')[count].style.transition = 'all 1s ease 0.59s';
    document.getElementsByClassName('No')[count].style.height = '0px';
    document.getElementsByClassName('No')[count].style.overflow = 'hidden';
    document.getElementsByClassName('No')[count].style.transition = '0.55s';
      }
   else if (Valu == 'Building' || Valu == 'House') {
    document.getElementsByClassName('No')[count].style.height = '30px';
    document.getElementsByClassName('No')[count].style.display = 'block';
    document.getElementsByClassName('No')[count].style.transition = 'all 1s ease 0.59s';
    document.getElementsByClassName('Yes')[count].style.height = '0px';
    document.getElementsByClassName('Yes')[count].style.overflow = 'hidden';
    document.getElementsByClassName('Yes')[count].style.transition = '0.55s';
   }
      else {
    document.getElementsByClassName('Yes')[count].style.overflow = 'hidden';
    document.getElementsByClassName('No')[count].style.overflow = 'hidden';
   }
   
   
   count++;
  });

 }
  
  
  
  //define template
var template = $('#content:first').clone();


//define counter
var count = 0;

//add new section
$('body').on('click', '#repeat', function() {

 var clone = template.clone();
    //increment
    count++;
 
 //remove cross button div
 clone.find('cross').removeAttr("#cross");
 
 //update id of ifYes & ifNo
 clone.find('.Yes').prop('id', 'ifYes' + count);
 clone.find('.No').prop('id', 'ifNo' + count);
 
    //loop through each input
    var inputSection = clone.find(':input').each(function(){

        //set id to store the updated section number
        var newId = this.id + count;

        //update id
        this.id = newId;

    }).end()
 
    //inject new section with animation
    .appendTo('#content').hide()
 .appendTo('#content').slideDown(500)
    return false;
});

//remove section
$('#content').on('click', '.cross', function() {
    //slide up section
    $(this).parent().slideUp(500, function(){
        //remove parent element (main section)
        $(this).parent().child().empty();
        return false;
    });
    return false;
});

.Yes{
     overflow: hidden;
     height: 0;
     -webkit-transition: all 1.5s ease;
     -moz-transition: all 1.5s ease;
     -ms-transition: all 1.5s ease;
     -o-transition: all 1.5s ease;
     transition: all 1.5s ease;
}


.No{
    overflow: hidden;
    height: 0;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <button type="button" id="cross" class="buttonImgTop cross">remove</button>
   <div id="ValuWrapper">
   
   <select id="ValuType" name="ValuType" class="ValuType" onchange="yesnoCheck()">
 <option disabled="disabled" selected="selected">Type of Property</option>
 <option id="Apartment" value="Apartment">Apartment</option>
 <option id="Building" value="Building">Building</option>
 <option id="Farm" value="Farm">Farm</option>
 <option id="House" value="House">House</option>
 <option id="Land" value="Land">Land</option>
   </select>
                   
      <div id="ifYes" class="Yes"> 'Yes' class text comes here </div>
      <div id="ifNo" class="No">  'No' class text comes here </div>
   </div>
</div>

<button type="button" class="buttonImg" id="repeat">repeat</button>

为具有不同 ID 名称的 div 提供内容

Provide content for a div with different ID name

html

javascript

css

forms

clone