为什么我的函数运行三次

我正在尝试构建一个标签云：当我单击标签时，所需的函数运行三次，如 3,2,1 或 2,1，而不是只有一次。这在jquery版本和普通js上都会发生。我错过了什么？这是一个非常简单的代码，我坚持下去：

.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }

    <!DOCTYPE html> 
    <html>  
    	<head>
    		<title>Exercise</title>
    		<link rel="stylesheet" type="text/css" href="2.css">
           <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
           </script>
    	</head>
    	<body>
    
       <div class="cloud">
       	<div id="firstword" class="weight-1" onclick="func1()">Cloud1</a>
       	<div id="secondword" class="weight-2" onclick="func2()">Cloud2</a>
        <div id="thirdword" class="weight-3" onclick="func3()">Cloud3</a>
    </div>
    
    <div>
    	<foo class="bar">
    		<foo id="ba"></foo>
    	</foo>
    </div>
    
    <script type="text/javascript">
    $(function()
    {
       $("#firstword").click(function()
       {
        alert("first.");
       });;
    
       $("#secondword").click(function(){
        alert("second.");
       });;
    
       $("#thirdword").click(function(){
        alert("third.");
       });;
    });	
    /*function func3(){
    	alert("3");
    };
    function func1(){
    	alert("1");
    }
    ;
    function func2(){
    	alert("2");
    };*/
    
    </script>
   </body>
  </html>

您收到此错误是因为您没有正确关闭div。

您需要这样做：

<div class="cloud">
    <div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
    <div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
    <div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>

这是一个jsFiddle，表明这就是您需要更改的全部内容 - https://jsfiddle.net/eyd5b0ku/

HTML close 标记不正确。更改它将起作用。

.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }

<!DOCTYPE html>
    
    <html>
    
    	<head>
    		<title>Exercise</title>
    		<link rel="stylesheet" type="text/css" href="2.css">
    
    		 <script type="text/javascript" src="jquery.js"></script>
    	</head>
    	<body>
    
       <div class="cloud">
       	<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
       	<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
       		   	<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
    </div>
    
    <div>
    	
    	<foo class="bar">
    		<foo id="ba"></foo>
    	</foo>
    </div>
    
    <script type="text/javascript">
    $(function(){
     
    $("#firstword").click(function(){
        alert("first.");
    });;
    
    $("#secondword").click(function(){
        alert("second.");
    });;
    
    $("#thirdword").click(function(){
        alert("third.");
    });;
    });	
    function func3(){
    	alert("3");
    };
    function func1(){
    	alert("1");
    }
    ;
    function func2(){
    	alert("2");
    };
    
    </script>
    	</body>
    </html>

现在应该可以正常工作

$(function() {
  $("#firstword").click(function(e) {
    alert("first.");
  });;
  $("#secondword").click(function(e) {
    e.stopPropagation();
    alert("second.");
  });;
  $("#thirdword").click(function(e) {
    e.stopPropagation();
    alert("third.");
  });;
});

.cloud .weight-1 {
  font-size: 10px;
}
.cloud .weight-2 {
  font-size: 25px;
}
.cloud .weight-3 {
  font-size: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cloud">
  <div id="firstword" class="weight-1">Cloud1</a>
    <div id="secondword" class="weight-2">Cloud2</a>
      <div id="thirdword" class="weight-3">Cloud3</a>
      </div>
      <div>
        <foo class="bar">
          <foo id="ba"></foo>
        </foo>
      </div>

相关内容

最新更新

热门标签：