javascript - 如何访问原本不在页面上的按钮以进行动画和刷新？

Question

我正在使用此代码笔来练习使用 API 和搜索栏动画。

wikiSearch codepen

  <form class="form">
<input id="search" type="text" name="search" placeholder="search">
<button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
<button type="reset" class="btn btn-reset fa fa-times" id="reset" onclick="moveReset();"></button>

我的一些js

$('.btn-reset').on('click', function(){
    $('.btn-reset').css({
      'right': '22px'
    })
    $('.btn-search').css({
  'background-color': 'white'
    })
})

搜索结果出现后如何访问 X 按钮？

在初始页面上，X 按钮按我希望的方式工作 - 当输入聚焦时向右移动，然后向左移动回到隐藏的位置。

我的目标是让这种行为持续存在，即使在结果显示之后，除了刷新到原始启动页面之外。

我试过在单击时添加一个事件类，委托(delegate)给正文中的#reset，添加一个与 html 内联的 onclick 事件，并使用位置重置属性，但无济于事。

感谢您的指点。

Answer 1

您遇到了 z-index 管理问题。单击搜索按钮后，重置按钮的 z-index 值为 -1，这意味着即使您认为自己点击了按钮，但实际上并没有看到该按钮。

解决此特定问题的一种方法可能是删除重置按钮的 css 文件中的 z-index 属性，同时将 z-index 值赋予输入控件(如 5)和搜索按钮(如 10)以保持你的逻辑已经有了。

// form validation
$("form").on("submit", function(e) {
    var word =  $("#search").val();
    if (word.length === 0) {
      alert("This field is required"); 
      e.preventDefault();
    } else {
      e.preventDefault();
      $('form').css({
        "margin-top": "0%"
      })
      $('body').css("background", "yellow")
      search(word);
    } 
})
  
// retrieve data from wikipedia api
function search(word) {
  $.ajax({
     url: '//en.wikipedia.org/w/api.php',
     data: { 
      action: 'opensearch', 
      list: 'search', 
      search: word, 
      format: 'json'
    },
     dataType: 'jsonp',
     
     success: function (response) {
      var content = ''
      
      for (var i = 0; i < response[1].length; i++) {
          content += 
          '<div class="item"> <a class="item-text" target="_blank" href='+response[3][i]+">"
              +"<h3>"+response[1][i]+"</h3>" 
              +"<p>" + response[2][i] + "</p>"
          +'</a> </div>';
       };
        
          $('#content').html(content)
          .css({
              "margin": "5% 25%",  
              "text-align": "center"
           });  
        }
    });
}


$('input').on('focus', function(){
  $('.btn-reset').css({
    'right': '-22px',
    'background-color': 'white'
  })
  $('.btn-search').css({
    'background-color': 'hotpink'
  })
})


$('.btn-reset').on('click', function(){
  $('.btn-reset').css({
    'right': '22px'
  })
  $('.btn-search').css({
    'background-color': 'white'
  })
})

* {
  box-sizing: border-box;
}

body {
  background: Chartreuse ;
  transition: all .3s ease-in-out;
}

/* search button: */

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 25%;
  z-index:5;
}

input:focus {
    outline: none;
}

button {
    text-align: center;
}

button:focus {
    outline: none;
}

.btn-search {
    background: hotpink;
    border: none;
    height: 30px;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    width: 30px;
    cursor: pointer;
    z-index:10;
}

.btn-reset {
    background: hotpink;
    border: none;
    height: 30px;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    width: 30px;
}

form {
  float: left;
  height: 50%;
  margin: 0% 27%;
  position: relative;
  width: 30%;
  margin-top: 10%;
}

input {
  border-radius: 15px;
  right: 0;
  transition: all .3s ease-in-out;
  width: 50%;
}

input:focus {
   width: 100%;
}

.btn-search {
    background: hotpink;
    color: #fff;
}

.btn-reset:focus {
    right: -22px;
}

button {
    transition: all .3s ease-in-out;
}

.btn-search {
    background: #ccc;
    border-radius: 50%;
    height: 26px;
    right: 2px;
    top: 2px;
    transition: all .3s ease-in-out;
    width: 26px;
 }

.btn-reset {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    padding: 0;
    right: 5px;
    top: 5px;
    width: 20px;    
 }



h3 {
  padding-top: 10px;
}


.item {
  position: relative;
  padding-bottom: 5px;
  background-color: hotpink;
  border-radius: 5px;
}

/* for underlining each item block */
/* .item:before {
    content: "";
    position: absolute;
    width: 75%;
    bottom: 0;
    left: 12.5%;
    border-bottom: 1px solid black;
} */

.item-text {
  text-decoration: none;
  color: black;
}

#returned {
  color: white;
  font-size: 0.75em;
}

<div class='search-wrapper'>
  <form class="form">
    <input id="search" type="text" name="search" placeholder="search">
    <button type="submit" class="btn btn-search fa fa-search" id="submit"></button>
    <button type="reset" class="btn btn-reset fa fa-times" id="reset"></button>
  </form>
</div>
    <br>
<div id="content">
</div>