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

Question

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

我的问题在于我的 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 名称执行此操作，并且效果很好。但是，在克隆表单时，我无法为所有新克隆的表单生成 div ifYes 和 ifNo。

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

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

对于处理此问题的最佳方式的一些帮助，我们将不胜感激。

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>