Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您收到此错误是因为您尚未正确关闭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/

Answer 2

HTML关闭标记不正确。改变它会起作用。

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

Answer 3

现在应该可以正常工作

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的功能会运行三次？

3 个答案: