jQuery關閉按鈕不起作用

Question

我在該站點上經歷了無數次討論，發現的任何代碼都沒有為我工作。 我要關閉3個彈出窗口（請參見下面的示例）。 我沒有找到為什么我發現的jQuery代碼都不起作用的想法。

實際上還附帶說明了為什么腳本在html中起作用，但在我的.js文件中卻不起作用（也可以在下面的示例中看到）？

如果您能幫助我解決這個問題，我將不勝感激，非常感謝您的寶貴時間。

 $("#close").on('click', function() { $("#id1").fadeOut(); });

 .abt-right { float: right; display: inline-block; } #id1, #id2, #id3 { display:none; } .abt-btn1, .abt-btn2, .abt-btn3 { position: relative; right: 10%; top: 100px; width: 500px; height: 90px; color: white; margin-bottom: 30px; } .abt-btn1 { background-color: black; color: white; } .abt-btn2 { background-color: grey; color: white; } .abt-btn3 { background-color: black; color: white; } #abt-content1, #abt-content2, #abt-content3 { position: absolute; padding-right: 10px; padding-top: 20px; right: 100px; bottom: 50px; width:100%; height: 100px; z-index: 999; } #abt-content1 { color: black; background-color: red; } #abt-content2 { color: black; background-color: blue; } #abt-content3 { color: black; background-color: green; } #close { position: absolute; right:0; top:0; padding:2px 5px; background:#ccc; }

 <div class="container-fluid wow fadeInLeft" id="about-sec"> <div class="back2"> <script type="text/javascript"> function show(elementId) { document.getElementById("id1").style.display="none"; document.getElementById("id2").style.display="none"; document.getElementById("id3").style.display="none"; document.getElementById(elementId).style.display="block"; } </script> <div class="abt-right"> <div class="abt-btn1" onclick="show('id1');">Job Experience</div> <div class="abt-btn2" onclick="show('id2');">Education</div> <div class="abt-btn3" onclick="show('id3');">Timeline</div> <div id="id1"> <div class="abt-content" id="abt-content1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. <span id="close">×</span> </div> </div> <div id="id2"> <div class="abt-content" id="abt-content2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. <span id="close">×</span> </div> </div> <div id="id3"> <div class="abt-content" id="abt-content3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. <span id="close">×</span> </div> </div>

Answer 1

這是一個小問題，請確保將事件處理程序包含在$(doument).ready(function){}); 另外，請確保ID應該是唯一的，這樣才能正常工作

http://plnkr.co/edit/He0ZmnJ4c72aQA9ggsl6?p=preview

javascript

$(document).ready(function() {
  $("#close1").on('click', function() {
    $("#id1").fadeOut();
  });
  $("#close2").on('click', function() {
    $("#id2").fadeOut();
  });
  $("#close3").on('click', function() {
    $("#id3").fadeOut();
  });
});

function show(elementId) {
    document.getElementById("id1").style.display = "none";
    document.getElementById("id2").style.display = "none";
    document.getElementById("id3").style.display = "none";
    document.getElementById(elementId).style.display = "block";
}

HTML

<body>
<h1>Hello Plunker!</h1>

<div class="container-fluid wow fadeInLeft" id="about-sec">
<div class="back2">
  <div class="abt-right">
    <div class="abt-btn1" onclick="show('id1');">Job Experience</div>
    <div class="abt-btn2" onclick="show('id2');">Education</div>
    <div class="abt-btn3" onclick="show('id3');">Timeline</div>

    <div id="id1">
      <div class="abt-content" id="abt-content1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close1">×</span>
      </div>
    </div>
    <div id="id2">
      <div class="abt-content" id="abt-content2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close2">×</span>
      </div>
    </div>
    <div id="id3">
      <div class="abt-content" id="abt-content3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        <span id="close3">×</span>
      </div>
    </div>
  </div>
  </div>
  </div>
  </body>

Answer 2

如果要使用它，則需要包含jQuery。

您可以在這里下載： https : //jquery.com/

或僅添加腳本標簽並從Google服務器加載

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

希望這可以幫助

jQuery關閉按鈕不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2016-05-12 15:32:09

解決方案2
0 2016-05-12 15:11:51

jQuery關閉按鈕不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2016-05-12 15:32:09

解決方案2 0 2016-05-12 15:11:51

解決方案1
1 已采納 2016-05-12 15:32:09

解決方案2
0 2016-05-12 15:11:51