jQuery 关闭按钮不起作用

Question

我浏览了该网站上的许多主题，none 我找到的代码对我有用。我有 3 个要关闭的弹出窗口（请参见下面的示例）。我运行不知道为什么我发现的 jQuery 代码中的 none 有效。

实际上还有一个旁注，为什么脚本在 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

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

您可以在这里下载： https://jquery.com/

或者只添加一个脚本标签并从 google 个服务器加载

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

希望对您有所帮助

Answer 2

这是一个 plunker，请务必将您的事件处理程序包含在 $(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>

jQuery 关闭按钮不起作用

jQuery close button not working

jquery

html

button

caption

closed-captions