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

非常感谢能帮助解决这个问题的最佳方法。

Answer 1

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

＆＃13;

$ = 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';
}

＆＃13;

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

＆＃13;

Answer 2

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

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名称

2 个答案: