Question

我认为我的问题最明显。我想创建一个订单，最后给出一些费用。在这一刻，我开始使用html和jquery函数。

现在我的问题：

您如何看待代码，有没有办法让它更好？
我怎样才能创建检查选择部分的功能和
然后将正确的价格添加到全额？
我的vars不是全球性的问题吗？

＆＃13;

$('input[name="ifCMS"]').change(function(){
	var grabVal = $(this).val();
		if(grabVal == "ifCMSyes"){
			$("#ifCMSyes").show();
			$("#ifCMSno").hide();
		}else{
			$("#ifCMSyes").hide();
			$("#ifCMSno").show();
            $("#chooseLAYOUTcontao").hide();
		    $("#chooseLAYOUTjoomla").hide();
		    $("#chooseLAYOUTwordpress").hide();
		}
});


$('input[name="chooseCMS"]').change(function(){
	var grabVal = $(this).val();
	if(grabVal == "Contao"){
		$("#chooseCMScontao").show();
		$("#chooseCMSjoomla").hide();
		$("#chooseCMSwordpress").hide();
		$("#chooseCMSandere").hide();
		$("#chooseCMSno").hide();
	}else if(grabVal == "Joomla"){
		$("#chooseCMScontao").hide();
		$("#chooseCMSjoomla").show();
		$("#chooseCMSwordpress").hide();
		$("#chooseCMSandere").hide();
		$("#chooseCMSno").hide();
	}else if(grabVal == "Wordpress"){
		$("#chooseCMScontao").hide();
		$("#chooseCMSjoomla").hide();
		$("#chooseCMSwordpress").show();
		$("#chooseCMSandere").hide();
		$("#chooseCMSno").hide();
	}else if(grabVal == "Anderes"){
		$("#chooseCMScontao").hide();
		$("#chooseCMSjoomla").hide();
		$("#chooseCMSwordpress").hide();
		$("#chooseCMSandere").show();
		$("#chooseCMSno").hide();
	}else if(grabVal == "Keine Präferenz"){
		$("#chooseCMScontao").hide();
		$("#chooseCMSjoomla").hide();
		$("#chooseCMSwordpress").hide();
		$("#chooseCMSandere").hide();
		$("#chooseCMSno").show();
	}
});

$('input[name="chooseCMS"]').change(function(){
	var grabVal = $(this).val();
	if(grabVal == "Contao"){
		$("#chooseLAYOUTcontao").show();
		$("#chooseLAYOUTjoomla").hide();
		$("#chooseLAYOUTwordpress").hide();
	}else if(grabVal == "Joomla"){
		$("#chooseLAYOUTcontao").hide();
		$("#chooseLAYOUTjoomla").show();
		$("#chooseLAYOUTwordpress").hide();
	}else if(grabVal == "Wordpress"){
		$("#chooseLAYOUTcontao").hide();
		$("#chooseLAYOUTjoomla").hide();
		$("#chooseLAYOUTwordpress").show();
    }else{
        $("#chooseLAYOUTcontao").hide();
		$("#chooseLAYOUTjoomla").hide();
		$("#chooseLAYOUTwordpress").hide();
    }
});

＆＃13;

.ifCMS{
    display:none;

}
.chooseCMS {
    display: none;
}
.chooseLAYOUT {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
	<tr>
    	<td width="20%">Wünschen Sie ein CMS oder eine statische Seite?</td>
        	<td width="30%">
        		<input type="radio" name="ifCMS" value="ifCMSyes"> CMS<br />
            	<input type="radio" name="ifCMS" value="ifCMSno"> Statisch
      		</td>
     	<td width="50%">CMS steht für Conent-Management-System und bedeutet, dass es ihnen möglich ist Beiträge oder Änderungen mit einen relativ geringen Aufwand vorzunehmen.</td>
   	</tr> 
   	<tr id="ifCMSno" class="ifCMS">
    	<td></td>
    	<td>Da Ihre Produktwahl sehr spezifisch ist, ist es nicht möglich eine Offerte zu erstellen. Bitte nehmen Sie Kontakt mit uns auf.</td>
        <td>	</td>
   </tr>
   <tr id="ifCMSyes" class="ifCMS">
   		<td>Welches CMS hätten Sie gerne?</td>
    	<td>
        	<input type="radio" name="chooseCMS" value="Contao"> Contao<br />
            <input type="radio" name="chooseCMS" value="Joomla"> Joomla<br />
            <input type="radio" name="chooseCMS" value="Wordpress"> Wordpress<br />
            <input type="radio" name="chooseCMS" value="Anderes"> Anderes<br />
            <input type="radio" name="chooseCMS" value="Keine Präferenz"> Keine Präferenz<br />
        </td>
        <td id="chooseCMScontao" class="chooseCMS">Contao</td>
        <td id="chooseCMSjoomla" class="chooseCMS">Joomla</td>
        <td id="chooseCMSwordpress" class="chooseCMS">Wordpress</td>
        <td id="chooseCMSandere" class="chooseCMS">Anderes</td>
        <td id="chooseCMSno" class="chooseCMS">Keine Präferenz</td>
                </tr>
        <tr id="chooseLAYOUTcontao" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td><input type="radio" name="chooseLAYOUTcontao" value="simpler"> Simpler<br />
                <input type="radio" name="chooseLAYOUTcontao" value="simpler"> Host-Cocco<br />
                <input type="radio" name="chooseLAYOUTcontao" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTcontao" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>
                
         <tr id="chooseLAYOUTjoomla" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td><input type="radio" name="chooseLAYOUTjoomla" value="zhong"> Zhong<br />
                <input type="radio" name="chooseLAYOUTjoomla" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTjoomla" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>
                
                         <tr id="chooseLAYOUTwordpress" class="chooseLAYOUT">
            <td>Wählen Sie ein Grundlayout</td>
            <td>                <input type="radio" name="chooseLAYOUTwordpress" value="individuell"> Individuell<br />
                <input type="radio" name="chooseLAYOUTwordpress" value="eigenes"> Eigenes
            </td>
             <td></td>
        </tr>

</table>

＆＃13;

非常感谢您的帮助

Answer 1

试试这段简短的代码：

<强> 更新

只需在顶部的else块中添加$(".chooseLAYOUT").hide();这一行..

＆＃13;

$('input[name="ifCMS"]').change(function() {
  var grabVal = $(this).val();
  if (grabVal == "ifCMSyes") {
    $("#ifCMSyes").show();
    $("#ifCMSno").hide();
  } else {
    $("#ifCMSyes").hide();
    $("#ifCMSno").show();
    $(".chooseLAYOUT").hide();//just add here this line..

  }
});


$('input[name="chooseCMS"]').change(function() {
  var grabVal = $(this).val();
  $("#chooseCMS").html($(this).val())
});
$('input[name="chooseCMS"]').change(function() {
  var grabVal = $(this).val();
  if (grabVal == "Contao") {
    $("#chooseLAYOUTcontao").show();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").hide();
  } else if (grabVal == "Joomla") {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").show();
    $("#chooseLAYOUTwordpress").hide();
  } else if (grabVal == "Wordpress") {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").show();
  } else {
    $("#chooseLAYOUTcontao").hide();
    $("#chooseLAYOUTjoomla").hide();
    $("#chooseLAYOUTwordpress").hide();
  }
});

＆＃13;

.ifCMS {
  display: none;
}
.chooseCMS {
  display: none;
}
.chooseLAYOUT {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td width="20%">Wünschen Sie ein CMS oder eine statische Seite?</td>
    <td width="30%">
      <input type="radio" name="ifCMS" value="ifCMSyes">CMS
      <br />
      <input type="radio" name="ifCMS" value="ifCMSno">Statisch
    </td>
    <td width="50%">CMS steht für Conent-Management-System und bedeutet, dass es ihnen möglich ist Beiträge oder Änderungen mit einen relativ geringen Aufwand vorzunehmen.</td>
  </tr>
  <tr id="ifCMSno" class="ifCMS">
    <td></td>
    <td>Da Ihre Produktwahl sehr spezifisch ist, ist es nicht möglich eine Offerte zu erstellen. Bitte nehmen Sie Kontakt mit uns auf.</td>
    <td></td>
  </tr>
  <tr id="ifCMSyes" class="ifCMS">
    <td>Welches CMS hätten Sie gerne?</td>
    <td>
      <input type="radio" name="chooseCMS" value="Contao">Contao
      <br />
      <input type="radio" name="chooseCMS" value="Joomla">Joomla
      <br />
      <input type="radio" name="chooseCMS" value="Wordpress">Wordpress
      <br />
      <input type="radio" name="chooseCMS" value="Anderes">Anderes
      <br />
      <input type="radio" name="chooseCMS" value="Keine Präferenz">Keine Präferenz
      <br />
    </td>
    <td id="chooseCMS"></td>
    <!--<td id="chooseCMScontao" class="chooseCMS">Contao</td>
    <td id="chooseCMSjoomla" class="chooseCMS">Joomla</td>
    <td id="chooseCMSwordpress" class="chooseCMS">Wordpress</td>
    <td id="chooseCMSandere" class="chooseCMS">Anderes</td>
    <td id="chooseCMSno" class="chooseCMS">Keine Präferenz</td>-->
  </tr>
  <tr id="chooseLAYOUTcontao" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTcontao" value="simpler">Simpler
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="simpler">Host-Cocco
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTcontao" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

  <tr id="chooseLAYOUTjoomla" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTjoomla" value="zhong">Zhong
      <br />
      <input type="radio" name="chooseLAYOUTjoomla" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTjoomla" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

  <tr id="chooseLAYOUTwordpress" class="chooseLAYOUT">
    <td>Wählen Sie ein Grundlayout</td>
    <td>
      <input type="radio" name="chooseLAYOUTwordpress" value="individuell">Individuell
      <br />
      <input type="radio" name="chooseLAYOUTwordpress" value="eigenes">Eigenes
    </td>
    <td></td>
  </tr>

</table>

＆＃13;

jQuery计算表单

1 个答案: