使用if语句和jquery更改html内容

时间：2017-07-23 23:06:43

标签： javascript jquery if-statement

我正在尝试根据选择菜单的值显示某些句子和图像。

如果用户选择他的平台是“Android”，那么他将看到一条特定的消息。如果他选择他的平台是“iOS”，那么他将看到另一个。

我想使用变量“isAndroid”来实现这一点，如果是，它将显示Android消息加上android图标，如果为false，则会显示iOS消息和iOS图标。

然后我实现了jquery方法“change（）”，以便能够在“Android”和“iOS”之间切换选择器值时切换内容并更改内容。我已经设法以一种不同的，更复杂的方式实现我的目标，但是我想用这个布尔值来做它以后更多的东西，如果“isAndroid”是真的它会做很多其他的事情，但我是这里显示基本内容以保持简单。

这是我的实际HTML和Javascript代码：

function platformAndroid() {  //function with the content of Android. it should run if "esAndroid" is true
			$("#iconoDispositivo").attr("src","http://i.imgur.com/ksYWdrF.png");
			$("#chosenPlatform").html("Your chosen platform was android");
		}

		function platformIos(){   //function with the content of iOS. it should run if "esAndroid" is false
			$("#iconoDispositivo").attr("src","http://i.imgur.com/YPqQsib.png");
			$("#chosenPlatform").html("Your chosen platform was iOS")
		}

		var isAndroid = true;                    

		function dispositivoStart(){                    // this functions displays the correct stuff when user refresh the page                                                                                                                                  
			if($('#dispositivo').val() === "Android"){  //if my select input value is android, then "esAndroid" is true
				isAndroid;
			} else {
			 	isAndroid = false;                      // otherwise it is false
			}

			$('#dispositivo')on.("change",function(){        //here i wrote this piece of code to switch "esAndroid" to true or false when they select different values on the selector input
				if($(this).val() === "Android"){
					isAndroid;
				} else {
				 	isAndroid = false;
				}
			})


			if(isAndroid){            // here is the piece of code that displays the content. if esAndroid is true, then the function that displays "Android" content runs.
				platformAndroid()  
			} else {
				platformIos()      //if "esAndroid" is false, then the function that displays  "iOS" content runs
			}
			
		}

		dispositivoStart();
    
#chosenPlatform {
font-size: 20px;
color: green;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>
		Platform choose
	</title>
</head>
<body>
	<h2>Platform</h2>
	<div class="field">
	    <label for="dispositivo">Choose your platform</label><br>
	    <select id="dispositivo">
	        <option>Android</option>
	        <option>iOS</option>
	    </select>
	</div>
	<div class="field">
	    <p id="chosenPlatform">Your chosen platform was Android</p>	<img src="http://i.imgur.com/ksYWdrF.png" width="32" alt="androidIcon" id="iconoDispositivo"> 
	</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
</body>
</html>

我无法理解为什么在代码片段中我无法正确调用jquery，在我自己的文件中我使用cdns，但那是我正在尝试运行的代码。

使用当前代码，“isAndroid”中的布尔值会更改为false，但不会显示“isAndroid”为false（iOS内容）时应显示的内容。当选择输入值再次切换到“Android”时，它也不会切换回true。

正如我在开始时说的，如果我使用

，我可以实现我的目标 
#dispositivo.val() === "Android"

但我认为做“isAndroid”= true / false更简单，因为我必须继续使用该布尔来显示某些内容，具体取决于该选择器值。

我希望我足够清楚，这是我在Stackoverflow上写的第二个问题，提前谢谢。

1 个答案:

答案 0 :(得分：0)

在我们解决您的主要问题之前，我们应该解决您的HTML问题。通过a validator运行HTML（不是W3C，它已经过时了）。该演示包含一个插入<section>的HTML内容的工作示例，以及在<output>表单控件中设置的值，该控件由用户选择的<select>确定。

方法，属性＆amp;过程

的jQuery

.on() Event Delegation

.html()，.text()，＆amp; .val()

的JavaScript

ES6 Template Literals

switch()

详情在演示

中发表

演示

/* NOTE: ES6 Template Literals are being used instead of
|| String Literals:

[Example: String Literal >>> 
   var SL = "This is a String, this is a " + variable\ 
   + " concatenated";
   
[Example: Template Literal >>>  
   var TL = `This is a String, this is a ${variable}
   interpolated`;
*/
   
/* Register change event on the select#mobile
|| .on() method delegates events. Main advantage
|| of delegating events is that the event will
|| be registered not only for elements currently
|| in DOM, but elements that will be there in the
|| future.
*/
/* Callback function is getContent which is invoked
|| upon a change event occurring on #mobile
*/
$('#mobile').on('change', getContent);


function getContent(e) {
  // Store the value of a form control (i.e. #mobile)
  var opt = this.value;
  
  /* Pass value to a switch(). A switch() method is
  || a if/if else condition that's easier to read.
  */
  switch (opt) {
  
    // if (opt === 'android') {...
    case 'android':
    
      /* If getting/setting data of a form control
      || use .val() method.
      || ex. input, output, select, etc..
      */
      // Change the value of output#out
      $('#out').val(`Selected OS is Android`);
      
      /* If getting/setting content between an element's
      || tags use .html() or .text() methods
      || ex. <div>CONTENT</div>
      */
      // Change the HTML of section.dock
      $('.dock').html(
        `<h1>Samsung Galaxy</h1>
      <label>Model: <input></label>
      <button>DONE</button>`);
      break;
    case 'iOS':
      $('#out').val(`Selected OS is iOS`);
      $('.dock').html(
        `<h1>iPhone</h1>
      <label>Model: <input></label>
      <button>DONE</button>`);
      break;
      /* If its neither 'android' nor 'iOS', then it
      || refers to default case. In this particular case
      || output#out and section.dock will be erased. 
      */
    default:
      $('#out').val('');
      $('.dock').html('');
      break;
  }
}
select,
input,
button,
label {
  font: inherit
}
<form id='interface'>

  <select id='mobile'>
    <option value='-'>-------------</option>
    <option value='android'>Android</option>
    <option value='iOS'>iOS</option>
  </select>

  <output id='out'></output>
</form>



<section class='dock'></section>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

相关问题
最新问题